ワードプレスのテーマ「Cocoon」を使ったミニサイトづくり自分用の作業メモ。
作業の流れとどのサイトを見たら参考になるかを、ミニサイト作成しながら記事執筆中。
０．準備
- エックスサーバでドメインまたは、サブドメインの追加
- ワードプレス簡単インストール
簡単インストールの際、ドメインまたはサブドメイン/ｗｐにしない。（私の場合）
ここで注意するのはサブドメインにワードプレスをインストールする場合、ドメイン横のⅴでサブドメインを選択すること。私はメインドサイトの上に上書きしてしまい、大変な思いをしました。ご注意を！
１．「Cocoon」テーマと子テーマをインストール。
ワードプレス無料テーマ「Cocoon」は本当に優秀。Cocoonの前身「Simplicty」を愛用していましたが、自分でCSSでカスタマイズしていた機能がつまった新しいテーマです。私は手持ちのサイトを全部Cocoonに変更しました。
「Cocoon」と「Cocoonの子テーマ」をインストールして、子テーマを有効化して利用します。
２．プラグインのインストール
Cocoonは、ほとんどプラグインがいりませんが、必要なものをあらかじめインストール。
サイト運営のためプラグイン
Jetpack- Akismet Anti-Spam
- Contact Form 7
- Category Order and Taxonomy Terms Order
- WP Multibyte Patch
- Wordfence Security
画像管理のためのプラグイン
- EWWW Image Optimizer
SEOのためのプラグイン
- Google XML Sitemaps
- WebSub/PubSubHubbub
私はキャッシュ系のプラグインは入れていません。Cocoonおすすめプラグインのほかにいれているのは
- BackWPup
３.一般設定
サイトのSSL化
サブドメインの.htaccess編集
.htaccess編集は大切なところなので、各レンタルサーバーの公式サイトを参考にしてください。
私用メモ
エックスサーバー「ファイルマネージャー」
設定対象ドメイン＞public_html＞サブドメイン＞wp>.htaccess
４．外観→カスタマイズ
サイト基本情報
- サイトのタイトル
- キャッチフレーズ
- サイトアイコンの設定
- フロント（固定ページ）
５．Cocoon設定
Cocoon設定はかなり細かいところまで設定できますが、とりあえずデフォルトで記事を入れてから、好きなようにカスタマイズしていきます。
全体設定
◆サイトキーカラーがあれば変更
私はCocoonの繭のように白いサイトというコンセプトが好きなので、いつもデフォルトで使用していますが、サイトのキーカラーを変更するとオリジナリティが出るのでいいですね。
◆サイドバーの表示設定
フロント非表示設定にしています。
アクセス解析
- アナリティクス設定
- サーチコンソール設定
OGP
- OGP設定のホームページのイメージが、デフォルトだとCocoonのままなのでオリジナル画像に変更。
- ツイッターカードを「大きな画像のサマリー」に変更
→Card Validator で確認
404 PAGE NOT FOUNDページの作成
画像
アイキャッチ画像の中央寄せにチェック
※タイトルの中央寄せをする場合は、テーマの編集→style cssにコードを書く。
https://wp-cocoon.com/community/cocoon-theme/記事タイトル中央寄せのやり方について/
エディター
ワードプレス5.0をインストールまたはバージョンアップした場合、新エディターが「Gutenberg」とても使いにくいという問題が。
Gutenbergエディターを有効にするのチェクを外すと、ワードプレス5.0でも旧エディターが利用できます。
5.固定フロントページの作成
カラムを利用し画面を分割。構成にそってカテゴリー画面を作成していきます。（私の場合）
６．個別ページの作成
Cocoonの表示オプションボックスより「カスタムフィールド」にチェック。カスタムフィールドを使用してデータベースページを作成。
カスタムフィールドは、飲食店や施設紹介など、決まったフォームで記事を書きたいときにおすすめです。あとで評価順に並べ替えることもできます。
カスタムフィールドを簡単作業するためのプラグイン「Custom Field Template」をインストール。
- TEMPLATE（フォームの登録）
- [cft] and [cftsearch] ShortCode Format（表示テンプレートの登録）
７．カスタマイズいろいろ
プロフィールを変える
カスタムフィールドを利用する
プラグイン「Custom Field Template」を使用
ページスピードをあげる
パソコン98/モバイル81
↓
【Cocoon高速化】後 パソコン93/モバイル86
↓
【AMP】後 パソコン99/モバイル92
ロゴの作成
ミニサイト作成しながら記事執筆中。2019年1月23日
