WordPressをカスタマイズ
テーマを設定
Cocoonをダウンロード
WordPressでテーマを設定
WordPressの管理画面で
外観
> テーマ
- Twenty Nineteen
- Twenty Twenty
などを削除。
新規追加
をクリック。
テーマのアップロード
> ファイルを選択
cocoon-master-2.3.5.1.zip(親テーマ)
のようなファイルを選択、今すぐインストール
同じく、
cocoon-child-master-1.1.3.zip(子テーマ)
のようなファイルも今すぐインストール
子テーマの方を有効化
Cocoonのカスタマイズ
/wp-content/themes/cocoon-child-master
というディレクトリにCocoon Childのファイル群がある。
既存環境をもとに新サイトを立ち上げる場合は、以下のファイルなどを既存環境からもってきて入れ替える。
(独自の拡張を行っている部分を反映させる)
- tmp-user/head-insert.php
- amp.css
- editor-style.css
- style.css
- functions.php
- widget-multi-h2.php
プラグインを設定
プラグイン
プラグインを削除
- Hello Dolly
を削除
プラグインを追加
- Edit Author Slug
- Jetpack
- WebSub (FKA. PubSubHubbub)(旧WebSub/PubSubHubbub)
- WP Multibyte Patch
をインストール、有効化。
XMLサイトマップ用のプラグイン
「XML Sitemaps(旧Google XML Sitemaps)(作者: Auctollo)」が以前はメジャーだった。
最近はあまりメンテナンスされていない。
WordPressの管理画面からプラグインを検索しても、「XML Sitemaps」がヒットしなくなった。
「WordPress 5.5」以降は、WordPressに標準でXMLサイトマップが付いている。
https://example.com/wp-sitemap.xml
のようなURLでサイトマップにアクセスできる。
プラグインを用いたXMLサイトマップ生成は不要。
Akismet Anti-Spam (アンチスパム)
Akismet Anti-Spam (アンチスパム)
を有効化
WordPressでサイトを作るのが2回目以降なら、既にAkismet用のAPIキーを持っている。
APIキーを手動で登録。
WordPressでのサイト作成が初めてなら、Akismetにpersonalで登録。
登録時に4500円のような表示が出るが、寄付金は自分で設定できるので0円に設定することも可能。
登録時に設定したメールアドレス宛にAPIキー
が届く。
APIキー
を登録
コメントの投稿者の横に承認されたコメント数を表示する。
: チェックしない
厳密度
: スパムを常にスパムフォルダーに振り分けレビューする。
を選択。
プライバシー
: プライバシーに関する通知を表示しない。
を選択。
変更を保存
Jetpack を設定
初期作業
Jetpack を設定するアカウントを選択します。
: WordPress.comで続ける
メールアドレスなどを入力し、アカウントを作成
料金を選択する画面でStart for free
を選択。
どのようなサイトですか ?
: パーソナル
にチェック。
ダウンタイムの監視機能
: 後で
を選択。
関連記事
: 後で
を選択。
Creative Mail
: 後で
を選択。
サイトアクセラレーター
: 後で
を選択。
設定
Jetpack
> 設定
セキュリティ | |
---|---|
WordPress.com へのログイン | |
ユーザーが WordPress.com アカウントを使ってこのサイトにログインすることを許可します | オン |
パフォーマンス | |
---|---|
パフォーマンスおよびスピード | |
サイトアクセラレーターを有効化 | オフ |
画像の読み込みをスピードアップ | オフ |
静的ファイルの読み込みをスピードアップ | オフ |
執筆 | |
---|---|
作成 | |
LaTeX マークアップ言語を使って方程式や数式を入力 | オン |
ショートコードを使って作成し、人気サイトからメディアを埋め込む | オン |
ウィジェット | |
ウィジェット表示のコントロール機能を有効化して、特定の投稿やページだけにウィジェットを表示させる | オン |
ユーザーを設定
ユーザー
> 編集
名
ニックネーム(必須)
ブログ上の表示名
Twitter URL
はてブ URL
プロフィール情報
投稿者スラッグ
>カスタム設定
プロフィール画像のアップロード
を設定。
faviconやOGP用の画像を作成
プロフィール用の画像
240×240サイズのjpg画像を作成。
OGP用の画像
1200×630サイズのjpg画像を作成。
favicon用の画像
512×512サイズのpng画像を作成。
AMP用タイトル画像
500×60くらいのjpg画像を作成。
(高さは60で固定、幅は文字数に応じて調整)
設定
一般設定
設定
> 一般
キャッチフレーズ
を設定。
時刻形式
をH:i
に変更。
変更を保存
ディスカッション
デフォルトの投稿設定
投稿中からリンクしたすべてのブログへの通知を試みる
のチェックを外す。
新しい投稿に対し他のブログからの通知 (ピンバック・トラックバック) を受け付ける
のチェックを外す。
自分宛のメール通知
コメントがモデレーションのために保留されたとき
のチェックを外す。
コメント表示条件
すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認待ちにする
のチェックを外す。
変更を保存
メディア
画像サイズ
を
300×0
500×0
800×0
に変更
パーマリンク
共通設定
投稿名
を選択。
XML-Sitemap
XML-Sitemapというプラグインを使う場合は以下の設定をする。
優先順位を自動的に計算しない
Change Frequencies
の
固定ページ
を毎年
に変更。
優先順位の設定 (priority)
の
投稿 (個別記事) (“基本的な設定”で自動計算に設定していない場合に有効)
を0.7
に変更。
ダッシュボードを整理
ダッシュボード
> 表示オプション
画面上の要素 | |
---|---|
サイトヘルスステータス | チェックする |
概要 | チェックする |
アクティビティ | チェックする |
チェックする | |
クイックドラフト | チェックしない |
WordPress イベントとニュース | チェックしない |
ようこそ | チェックしない |
Cocoon設定
Cocoon 設定
スキン | |
---|---|
スキン一覧 | COLORS(ブルー) |
全体 | |
---|---|
キーカラー | |
サイトキーカラー | #1da1f2 |
サイトフォント | |
フォント | メイリオ, ヒラギノ角ゴ |
サイト背景色 | |
背景色 | #dae9f2 |
サイトキーカラーで指定したものが、h2タグなどの色になる。
ヘッダー | |
---|---|
ヘッダー色(ロゴ部) | |
ロゴエリア背景色 | #1e73be |
広告 | |
---|---|
広告設定 | |
広告ラベル | 空欄にする |
アドセンス設定 | |
広告コード | 空欄(仮) |
タイトル | |
---|---|
フロントページ設定 | |
フロントページタイトル | サイト名 |
サイトの説明 | 各自の環境に合わせて設定 |
メタキーワード | 各自の環境に合わせて設定 |
タイトル共通設定 | |
簡略化したサイト名 | 必要ならば設定 |
SEO | |
---|---|
headタグ設定 | |
headタグに挿入 | |
タグページをnoindexとする | チェックする |
OGP | |
---|---|
ホームイメージ | |
画像のアップロード | 1200×630の画像をアップロード |
アクセス解析・認証 | |
---|---|
アクセス解析設定 | |
サイト管理者も含めてアクセス解析する | チェックしない |
投稿 | |
---|---|
関連記事設定 | |
関連記事を表示する | チェックなし |
ページ送りナビ設定 | |
表示タイプ | サムネイル正方形 |
表示位置 | 本文下 |
パンくずリスト設定 | |
パンくずリストの配置 | メインカラム手前 |
固定ページ | |
---|---|
パンくずリスト設定 | |
パンくずリストの配置 | メインカラム手前 |
記事タイトル | |
パンくずリストに記事タイトルを含める | チェックする |
本文 | |
---|---|
外部リンク設定 | |
外部リンクの開き方 | 新しいタブで開く(_blank) |
アイコン表示 | |
アイコンの表示 | チェックする |
投稿情報表示設定 | |
記事を読む時間の目安を表示する | チェックする |
目次 | |
---|---|
目次設定 | |
目次表示の深さ | H3見出しまで |
目次の表示順 | チェックする |
SNSシェア | |
---|---|
ツイート設定 | |
ハッシュタグ | 各自の環境に合わせて設定 |
SNSフォロー | |
---|---|
フォローボタン | |
フォロー数の表示 | チェックする |
画像 | |
---|---|
本文画像設定 | |
本文上にアイキャッチを表示する | チェックしない |
アイキャッチ自動設定を有効にする | チェックする |
全体画像設定 | |
サムネイルをRetinaディスプレイ対応にする | チェックする |
NO IMAGE設定 | |
NO IMAGE画像 | OGP用の画像を設定 |
コメント | |
---|---|
コメント設定 | |
コメントタイプ | シンプルスレッド |
ウェブサイト入力ボックスを表示する | チェックを外す |
カルーセル | |
---|---|
カルーセル設定 | |
カルーセルの表示 | 全ページで表示 |
スマートフォンで表示(480px以下) | チェックしない |
表示内容 | |
全期間 で集計した人気記事を含める | チェックする |
オートプレイ | |
オートプレイを実行 | チェックする |
モバイル | |
---|---|
モバイル設定 | |
モバイルメニュー | ヘッダーモバイルボタン |
モバイルボタン | |
サイトヘッダーロゴを表示する | チェックしない |
404ページ | |
---|---|
404ページ設定 | |
404ページ画像 | クリア |
AMP | |
---|---|
AMP設定 | |
AMP機能を有効化する | チェックする |
AMPロゴ | 画像をアップロード |
管理者画面 | |
---|---|
投稿一覧設定 | |
カラム表示 | |
作成者を表示する | チェックしない |
投稿IDを表示する | チェックしない |
メモの内容を表示する | チェックする |
ウィジェット | |
---|---|
除外ウィジェット | |
固定ページ | チェックする |
アーカイブ | チェックする |
リンク | チェックする |
音声 | チェックする |
画像 | チェックする |
ギャラリー | チェックする |
動画 | チェックする |
メタ情報 | チェックする |
検索 | チェックする |
最近の投稿 | チェックする |
最近のコメント | チェックする |
RSS | チェックする |
タグクラウド | チェックする |
ナビゲーションメニュー | チェックする |
ブロック | チェックする |
Akismetウィジェット | チェックする |
[C] 関連記事 | チェックする |
[C] 最近のコメント | チェックする |
[C] SNSフォローボタン | チェックする |
[C] テキスト(PC用) | チェックする |
[C] テキスト(モバイル用) | チェックする |
[C] Facebookボックス | チェックする |
[C] CTAボックス | チェックする |
[C] ランキング | チェックする |
[C] 目次 | チェックする |
[C] ナビカード | チェックする |
[C] おすすめカード | チェックする |
[C] ボックスメニュー | チェックする |
ウィジェットエリア
以下のものにチェック
- メインカラムスクロール追従
- 投稿タイトル上
- 投稿タイトル下
- 投稿SNSボタン上
- 投稿SNSボタン下
- 投稿関連記事上
- 投稿関連記事下
- 投稿コメント上
- 投稿コメント下
- 固定ページタイトル上
- 固定ページタイトル下
- 固定ページ本文中
- 固定ページ本文下
- 固定ページSNSボタン上
- 固定ページSNSボタン下
- インデックスリストトップ
- インデックスリストボトム
- コンテンツ下部
- フッター左
- フッター中
- フッター右
- フッター(モバイル用)
エディター
エディター共通設定
> Gutenberg
Gutenbergエディターを有効にする
のチェックを外す。
旧エディター設定
> 確認ダイアログ
ページ公開前に確認アラートを出す
のチェックを外す。
その他
その他設定
> 簡単SSL対応
内部URLをSSL対応(簡易版)
にチェック。
高速化
ブラウザキャッシュ
ブラウザキャッシュの有効化
にチェックする。
縮小化
HTMLを縮小化する
にチェックする。
Lazy Load設定
Lazy Loadを有効にする
にチェックする。
Googleフォントの非同期読み込みを有効にする
にチェックする。
アイコンフォントの非同期読み込みを有効にする
にチェックする。
変更を保存
固定ページを作成
固定ページ
から以下のページを作成する。
- お問い合わせ
- プライバシーポリシー
- サイト内検索
お問い合わせ
スラッグ: contact
[contact-form][contact-field label="名前" type="name" required="true" /][contact-field label="メールアドレス" type="email" required="true" /][contact-field label="ウェブサイト" type="url" /][contact-field label="メッセージ" type="textarea" /][/contact-form]
プライバシーポリシー
設定
> プライバシー
新規プライバシーポリシーページを作成する
の生成
をクリック。
スラッグ: privacy-policy
サイト内検索
Google AdSense
広告
> 広告ユニットごと
新しい広告ユニットの作成
で検索エンジン
を追加。
広告ユニットの名前を入力
: xxx、サイト内検索
検索の対象
: 選択するサイトのみ
を選択。
検索するサイト
: example.com/*
作成
をクリック。
Google CSE
Google CSE(https://cse.google.com)の画面から各種設定。
設定
> 基本
検索エンジンのキーワード
: 各自の環境にあわせてキーワードを設定
画像検索
: オン
Googleサポート・検索エンジンを AdSense に関連付ける
ブログに貼り付ける用のコードは
設定
> 基本
コードを取得
をクリック。
<script async src="https://cse.google.com/cse.js?cx=partner-pub-1234567890123456:1234567890"></script> <div class="gcse-searchbox-only"></div>
上記のようなコードが表示される。
これは「検索ボックス」を表示するためのコード。
ブログのサイドバーなどに貼り付ける。
次へ: 検索結果コードの取得
をクリック。
<script async src="https://cse.google.com/cse.js?cx=partner-pub-1234567890123456:1234567890"></script> <div class="gcse-searchresults-only"></div>
上記のようなコードが表示される。
これは「検索結果」を表示するためのコード。
ブログの固定ページに貼り付ける。
検索ボックスで検索した結果を表示する専用ページ。
WordPress
固定ページを作成、検索結果
用のコードを貼り付け。
ウィジェットでサイドバーに検索ボックス
用のコードを貼り付け。
外観
カスタマイズ
サイト基本情報
サイトアイコンを選択
から512×512のfavicon用画像をアップロード。
メニュー
- ヘッダー
- フッター
- モバイルヘッダーボタン
の3つを作成。
ヘッダー
メニュー名
: ヘッダー
メニューの位置
: ヘッダーメニュー
次
をクリック。
項目を追加
をクリック。
- ホーム
- プライバシーポリシー
- お問い合わせ
などを追加。
フッター
メニューを新規作成
をクリック。
メニュー名
: フッター
メニューの位置
: フッターメニュー
次
をクリック。
項目を追加
をクリック。
- ホーム
- プライバシーポリシー
- お問い合わせ
を追加。
モバイルヘッダーボタン
メニューを新規作成
をクリック。
メニュー名
: モバイルヘッダーボタン
メニューの位置
: ヘッダーモバイルボタン
次
をクリック。
項目を追加
をクリック。
- ホーム
- お問い合わせ
- サイト内検索
を追加。
上記を一通り設定し終わったら、公開
をクリック。
ウィジェット
サイドバー
カスタムHTML
サイト内検索の検索ボックス用コードを貼り付け。
表示設定
ウィジェットの表示
: 'チェック・入力したページで非表示'
ページ
> AMPページ
にチェック
[C]プロフィール
タイトル
にプロフィール
と入力。
肩書きラベル
は空欄。
[C]人気記事
設定はデフォルトのまま。
カテゴリー
階層を表示
にチェック。
[C] 新着記事
「固定表示」記事を表示
のチェックを外す。
表示設定
ウィジェットの表示
: 'チェック・入力したページで非表示'
ページ
> トップページのみ
にチェック
コンテンツ上部
カスタムHTML
タイトル
: サイト内検索
内容
にGoogle CSE(Google AdSense)の検索ボックス
用コードを貼り付け。
表示設定
チェック・入力したページで表示
固定ページ
固定ページID入力
に、「サイト内検索」ページのページID
を入力。
404ページ
カスタムHTML
内容
に以下のようなコードを貼り付け。
<div class="column-wrap column-2"> <div class="column-left"> <h3>新着記事</h3> [new_list] </div> <div class="column-right"> <h3>人気記事</h3> [popular_list] </div> </div> <style> /* スマホでPC用フッターを非表示 */ @media screen and (max-width: 768px) { #footer{ display: none !important; } } </style>
メニュー
メニュー構造
の各項目について
ナビゲーションラベル
の文字数が多ければ調整。
(「プライバシーポリシー(個人情報保護方針)」を「プライバシーポリシー」に書き換えるなど)