WordPressをカスタマイズ

Cocoonダウンロードから

  • 親テーマ
  • 子テーマ

をダウンロード。

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 (アンチスパム)有効化

WordPressでサイトを作るのが2回目以降なら、既にAkismet用のAPIキーを持っている。
APIキーを手動で登録。

WordPressでのサイト作成が初めてなら、Akismetにpersonalで登録。
登録時に4500円のような表示が出るが、寄付金は自分で設定できるので0円に設定することも可能。

登録時に設定したメールアドレス宛にAPIキーが届く。

APIキーを登録

コメントの投稿者の横に承認されたコメント数を表示する。: チェックしない

厳密度: スパムを常にスパムフォルダーに振り分けレビューする。を選択。
プライバシープライバシーに関する通知を表示しない。を選択。

変更を保存

初期作業

Jetpack を設定するアカウントを選択します。WordPress.comで続ける

メールアドレスなどを入力し、アカウントを作成

料金を選択する画面でStart for freeを選択。

どのようなサイトですか ?パーソナルにチェック。

ダウンタイムの監視機能後でを選択。

関連記事後でを選択。

Creative Mail後でを選択。

サイトアクセラレーター後でを選択。

設定

Jetpack > 設定

セキュリティ
WordPress.com へのログイン
ユーザーが WordPress.com アカウントを使ってこのサイトにログインすることを許可します オン
パフォーマンス
パフォーマンスおよびスピード
サイトアクセラレーターを有効化 オフ
画像の読み込みをスピードアップ オフ
静的ファイルの読み込みをスピードアップ オフ
執筆
作成
LaTeX マークアップ言語を使って方程式や数式を入力 オン
ショートコードを使って作成し、人気サイトからメディアを埋め込む オン
ウィジェット
ウィジェット表示のコントロール機能を有効化して、特定の投稿やページだけにウィジェットを表示させる オン

ユーザー > 編集

  • ニックネーム(必須)
  • ブログ上の表示名
  • Twitter URL
  • はてブ URL
  • プロフィール情報
  • 投稿者スラッグ > カスタム設定
  • プロフィール画像のアップロード

を設定。

240×240サイズのjpg画像を作成。

1200×630サイズのjpg画像を作成。

512×512サイズのpng画像を作成。

500×60くらいのjpg画像を作成。
(高さは60で固定、幅は文字数に応じて調整)

設定 > 一般

キャッチフレーズを設定。

時刻形式H:iに変更。

変更を保存

デフォルトの投稿設定
投稿中からリンクしたすべてのブログへの通知を試みるのチェックを外す。
新しい投稿に対し他のブログからの通知 (ピンバック・トラックバック) を受け付けるのチェックを外す。

自分宛のメール通知
コメントがモデレーションのために保留されたときのチェックを外す。

コメント表示条件
すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認待ちにするのチェックを外す。

変更を保存

画像サイズ
300×0
500×0
800×0
に変更

共通設定
投稿名を選択。

XML-Sitemapというプラグインを使う場合は以下の設定をする。

優先順位を自動的に計算しない

Change Frequencies
固定ページ毎年に変更。

優先順位の設定 (priority)
投稿 (個別記事) (“基本的な設定”で自動計算に設定していない場合に有効)0.7に変更。

ダッシュボード > 表示オプション

画面上の要素
サイトヘルスステータス チェックする
概要 チェックする
アクティビティ チェックする
チェックする
クイックドラフト チェックしない
WordPress イベントとニュース チェックしない
ようこそ チェックしない
スキン
スキン一覧 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サポート・カスタム検索スタイルを作成する

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>

メニュー構造の各項目について
ナビゲーションラベルの文字数が多ければ調整。
(「プライバシーポリシー(個人情報保護方針)」を「プライバシーポリシー」に書き換えるなど)

  • 最終更新: 2021/10/18 15:40