長年利用していた ”はてなブログPro” から WordPress に移転しました。
移転は完了しても、荷物を開けて整理していく作業はこれからです。
初めての WordPress で最初に実施した内容を備忘録として残したいと思います。
同じような環境の方々の参考になれば幸いです。
テーマを ”Cocoon” に変更
WordPress には有料、無料と多くのテーマが存在します。
Google 先生に相談して、無料のテーマの中でもかなり高機能な ”Cocoon”を利用する事にしました。
以下の手順で ”Cocoon” をインストールします。
- https://wp-cocoon.com/downloads/ Cocoon の親テーマ/子テーマをダウンロードする
- ダッシュボードからダウンロードした zip ファイルをアップロードする
「外観」→「テーマ」→「新規追加」→「テーマのアップロード」 - アップロードした子テーマを有効化する
トップページを 3 カラムに変更
Cocoon のデフォルトは１カラムとなっています。
これはこれで見やすいのですが、なるべく多くの記事が目についた方が良いですよね。
そこで以下の手順でトップページを３カラムに変更しました。
- ダッシュボードから「Cocoon設定」→「インデックス」へ移動
- 「インデックス」ページをスクロールし「カードタイプ」を「縦型カード３列」へ変更
グローバルメニューを追加
このブログでは複数カテゴリーの記事を書く予定です。
記事を探しやすくするために以下の手順で「グローバルナビ（メニュー）」を設置しました。
- ダッシュボードから「外観」→「メニュー」→「新しいメニューを作成しましょう」を選択
- カテゴリ選択、メニュー名入力後、「ヘッダーメニュー」、「ヘッダーモバイルメニュー」にチェックを入れて「メニューを保存」を押す
※ カテゴリの表示順序はドラッグ＆ドロップで自由に変更できます。
プライバシーポリシーページを追加
サイトで収益を得ようとする場合にはプライバシーポリシーの掲載は必須です。
以下の手順で「固定ページ」にプライバシーポリシーを追加しました。
- ダッシュボードから「設定」→「プライバシー」を選択
- プライバシー設定のページから「新規ページを作成」を選択
- 「固定ページ」にテンプレートが表示されるので自由にカスタマイズ
お問い合わせフォームを追加
いずれは Google AdSense を申請しようと思っていますが、その場合「お問い合わせフォーム」が必須のようです。
Cocoon には「お問い合わせフォーム」の機能がないようなので、プラグインを使って追加します。
- ダッシュボードから「固定ページ」→「新規作成」で「お問い合わせフォーム」を作成する
- ダッシュボードから「プラグイン」→「新規追加」を選択
- 「プラグインを追加」のページで「キーワード」から Contact Form を検索
- 「今すぐインストール」でインストール後、有効化する
- インストールすると左サイドに「お問い合わせ」の項目ができるので、新規作成をクリック
- デフォルトのまま「お問い合わせフォーム」を保存するとショートコードが現れるのでこれを「固定ページ」の「お問い合わせフォーム」にコピペする
- 「お問い合わせフォーム」が出来上がるので、メール送信のテストを実施する
フッターメニューを追加
Cocoon では簡単にフッターメニューを表示する事ができます。
以下の手順でフッターメニューに「お問い合わせ」、「プライバシーポリシー」へのリンクを表示します。
- ダッシュボードから「外観」→「メニュー」へ移動し、メニュー名を入力した後「メニューを作成」をクリック
- 「メニュー項目を追加」から予め準備した固定ページの「お問い合わせ」、「プライバシーポリシー」を選択し「メニューに追加」をクリック
- メニューに「お問い合わせ」、「プライバシーポリシー」が追加されているのを確認し、「メニュー設定」で「フッターメニュー」にチェックを入れて「メニューを保存」をクリック
- フッタメニューを確認し、デザインは好みでカスタマイズします
プロフィールページを作成しサイドバーに表示
Cocoon にはプロフィール用のウィジェトがあります。
基本的な情報はこのウィジェットで表示できますが、より多くの情報を掲載したい場合は「固定ページ」を利用します。
以下の手順で「固定ページ」に詳細プロフィールを作成しサイドバーからリンクします。
- ダッシュボードの「固定ページ」→「新規追加」で記事を書くのと同じ要領で「プロフィールページ」を作成します
- ダッシュボードの「ユーザー」→「あなたのプロフィール」に必要情報を入力します
- 「プロフィール情報」に「固定ページ」で作成したプロフィールへのリンクを挿入します
- ダッシュボードの「外観」→「ウィジェット」→「プロフィール」へ移動し「サイドバー」にチェックを入れます
ヘッダー/フッターに画像を挿入
Cocoon はデフォルトのヘッダー/フッターのままで背景色、フォント、背景画像などの変更はできます。
ヘッダー/フッター共に以下の手順でお好みでカスタマイズします。
- 挿入したい画像、ロゴなどを予め準備します
- ダッシュボードの「Cocoon 設定」の「ヘッダー」、「フッター」タブでそれぞれのページに移動し、必要な設定を行います
- 私の場合、フッターの中央揃えがうまくいかなかったので、以下の追加 CSS を「外観」→「テーマ」→「Cocoon Child」→「カスタマイズ」→「追加 CSS」に貼り付けました
.[追加 CSS]
footer {
margin-top: 0px; /*フッターとコンテンツの間に余白追加*/
background: #ffffff; /*フッター背景色*/
border-top: 0px solid #72c7e6; /*上部にボーダー追加*/
}
.footer-bottom {
margin-top: 0px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
float: none;
bottom: auto;
position: static;
margin-bottom: 0px;
}
.footer-bottom-logo .logo-image {
padding: 0;
max-width: 300px; /*ロゴ画像を少し大きく*/
margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
float: none;
text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
justify-content: center;
margin-bottom: 1em;
}
.navi-footer-in a {
color: #aab3b9; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
color: #aab3b9; /*文字色を通常時と同じに*/
background: none; /*背景色をなしに*/
text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
color: #aab3b9; /*クレジットの文字色*/
}
@media screen and (max-width: 834px) {
.navi-footer-in > .menu-footer li.menu-item {
border: none; /*モバイルでメニューのボーダーを消す*/
}
}
@media screen and (max-width: 460px) {
.navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
width: 100%;
display: block;
flex: auto;
padding: 0.3em 0;
}
}このコードは WEB-ASHIBI さんのサイトを参考にさせて頂きました。
まとめ
私は純文系なので、HTML とか CSS とかの知識はありません。
Cocoon はかなりの事が標準機能でできるので初心者でも満足のいくサイトが構築できると思います。
「フッター画像の中央揃え」のみ追加CSS を使いましたが、もしかしたらどこかの設定で回避できるのかもしれません。
アドバイスなどあれば頂けるとありがたいです。
