参考サイト
SWELLで設定するときはこちら。
ConohaWing契約＆ワードプレスインストールした状態。
一番最初のページはこちら。
①テーマをインストール
②プラグインをいれる
フロントページの作成
ヘッダー
プラグイン
cocoon child
サイトの土台作り
cocoonテーマインストール
ここからダウンロード。cocoonとcocoon child。
テーマをcocoonにした最初の画面はこちら。
SSL化
ConohaWingは最初からSSL化されている。
※レンタルサーバーによって違う。mixhostは自分でやらないといけなかった。
プラグイン
EWWW Image Optimizer
Advanced Editor Tools (旧名 TinyMCE Advanced)
Contact Form 7
LIQUID SPEECH BALLOON
Site Kit by Google
WordPress Popular Posts
BackWPup
Aurora Heatmap
使い方は
バックアップの設定はした方が良い！
見た目を整える①
スキン設定
ヘッダー画像設定
cocoon設定→ヘッダー
ヘッダーを画像ではなく背景として使う場合はこちら
スキン・ヘッダーを設定した画像がこちら。
ホームイメージを設定(OGP)
cocoonでは、フロントに設定した固定ページのアイキャッチ。
SWELLの場合
サイトアイコン
サイト一般設定
ブログタイトル／キャッチフレーズ
サイトアイコンの設定
フッター作成／必要最低限の固定ページ
お問合わせフォーム
プライバシーポリシー
プロフィール
contact form 7使い方
上記３つの固定ページをフッターに設定する。
サイトの信頼性と関係し、SEO対策にもなると言われている。
グローバルメニュー作成
カテゴリー設定
すでにアメブロやはてなブログなどで記事をお持ちの方は、先にカテゴリー分けを作っておくと全体像が見えやすくなる。
ヘッダーメニューにカテゴリーを設定
ヘッダー・フッター・メニューをつけた状態がこちら。
フッターモバイルボタン
ヘッダーモバイルボタン
サイドバーの設定
メタ情報
を削除する
メタ情報削除
ウィジェットを設定
ウィジェットには必要な情報だけを出す。
プロフィール／サイドバー・本文下
パーマリンクの設定
ここまで設定すると、今こんな感じ。
ヘッダーをもともとアメブロで使っていた画像を使い、記事ももうちょっと追加。
記事が溜まってきたら、フロントページを作ります。
フロントページ
固定ページのタイトルを削除する。
入れたい文章をいれる。
カテゴリー分けされた記事を出す。
ショートコードをいれてカテゴリーごとの表示に。
ｃｓｓで記事表示を２つにする。
など、フロントページの作成はいろいろ。
タイトルを削除するカスタムcss
.entry-title {
display: none;
}
.article-header > .eye-catch-wrap {
display: none !important;
}
.article-header h1,
header.article-header.entry-header,
.eye-catch,
header .article-header,
.date-tags {
position: static;
}
cocoonの吹き出し設定
フロントページを整える
これが、cocoonで制作したページ。
SWELLへ移行
※最初からSWELLをいれておくべき。