WordPressテーマ「Cocoon(コクーン)」の最低限やっておきたい初期設定

ワードプレス テーマ - Cocoon コクーン

高機能で有名な WordPress の無料テーマ「Simplicity(シンプリシティー)」

その Simplicity を作られているわいひら@寝ログさん が、後継として新たに開発されている無料 WordPress テーマが「Cocoon(コクーン)」です。

Simplicity 同様、SEO・高速化・モバイルフレンドリーに最適化、見た目はシンプル。

さらに、Simplicity フォーラム に投稿された意見を参考に、技術的な知識が無くても使えるよう、感覚的に使える便利機能が満載!

ここでは、そんな Cocoon(コクーン)のインストールから、最低限必要な初期設定につい解説します。

Cocoon(コクーン)は、設定できる項目が多く、どこに何の設定があるのか分からなくなるため、一応、設定できる項目も全て紹介します。

スポンサーリンク

Cocoon(コクーン)をインストールする前にやっておくべき設定

Cocoon(コクーン)をインストール

一般的な、他のテーマと同じです。

「そんなの知ってるわ!」って方は、次の見出しまで、読み飛ばしてください。

まずは、Cocoon 公式サイトから、Cocoon(コクーン)本体と、子テーマをダウンロードしてください。

ダウンロードしたら、WordPress(ワードプレス)の管理画面にログインしてください。

左メニューの「外観」「テーマ」を選択。

WordPress(ワードプレス)テーマ 新規追加

「新規追加」を選択してください。

WordPress(ワードプレス)テーマ アップロード

「テーマのアップロード」を選択。

ダウンロードした Cocoon(コクーン)本体(cocoon-master-xxx.zip)を選択し、「今すぐインストール」を押してください。

Cocoon(コクーン)アップロード完了

アップロードが完了したら、「テーマのページに戻る」をクリックしてください。

次は、本体と同じように、Cocoon(コクーン)の子テーマ(cocoon-child-master-xxxx.zip)もインストールしてください。

インストールが完了したら、「有効化」をクリックしてください。

左メニュー - Cocoon(コクーン)設定

正しくインストールが完了していれば、左メニューに「Cocoon 設定」という項目が表示されます。

初期設定(Cocoon 設定)

ここでは、必要最低限の設定のみを紹介します。

まずは、左メニューの「Cocoon 設定」をクリックしてください。

【タイトル】

フロント(TOP)ページ・投稿・固定ページ・カテゴリーページ・の、タイトル、メタディスクリプション、メタキーワードの設定と、タイトルで使用される区切り文字の設定です。

変更内容

  • 「フロントページタイトル」を「サイト名」か「自由形式」に変更
  • 「メタキーワードタグの出力」は、全てチェックを外す
設定項目

  • フロント(TOP)ページで出力するタイトル
  • フロント(TOP)ページで出力するメタディスクリプションタグの内容
  • フロントページで出力するメタキーワードタグの内容
  • 投稿・固定ページで出力するタイトルタグのフォーマット
  • 簡略化したサイト名
  • 投稿・固定ページのページの head タグ内に、メタディスクリプションタグの出力設定
  • 投稿・固定ページのページの head タグ内に、メタキーワードタグの出力設定
  • カテゴリーページで出力するタイトルタグのフォーマット
  • カテゴリーページのページのheadタグ内に、メタディスクリプションタグの出力設定
  • カテゴリーページのページのheadタグ内に、メタキーワードタグの出力設定
  • タイトルで使用される区切り文字

【SEO】

head タグ内に追加する link タグ・表示する日付形式の設定です。

変更内容

  • 「表示する日付形式」を、「表示しない」に変更

好みの問題ではありますが、投稿日・更新日を表示するメリットは無いと思います。

設定項目

  • canonical タグ設定
  • 分割ページの rel=”next”/”prev” タグ設定
  • カテゴリページの 2ページ目以降の noindex 設定
  • タグページの noindex 設定
  • アーカイブページの noindex 設定
  • 添付ファイルページの noindex 設定
  • 表示する日付形式

【OGP】

Facebook や Twitter などの SNS でシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みの設定です。

変更内容

  • 「OGP タグの挿入」にチェック
  • 「Twitter カードの有効化」にチェック
  • 「Twitter カードタイプ」は、「サマリー」を選択
  • 「画像のアップロード」に、TOP ページの OGP 画像として表示させたいものを選択

「Facebook APP ID」については、未入力のままで問題ありません。

対応したいという方は、「Facebook の OGP設定に必要な fb:app IDの取得方法|株式会社デザインプラス 」を参考に、設定してください。

いぬ先生
いぬ先生

「トップページの OGP 画像」は、必ず対応しておこう!

設定項目

  • OGP タグの利用設定
  • Facebook の OGP 設定
  • Twitter カードタグの利用設定
  • Twitter カードの表示形式
  • トップページの OGP や Twitter カードで表示する画像

【アクセス解析・認証】

Google Analytics・サーチコンソールなどアクセス解析全般の設定です。

変更内容

  • それぞれアカウントを持っている人は、登録
  • 「サイト管理者も含めてアクセス解析する」のチェックを外す

アカウントを持ってない方は、最低限、Google Analytics・サーチコンソールは、取得しておいた方が良いです。

取得方法に関しては、以下の記事を参考にしてください。

Search Console(サーチコンソール)にサイトを登録しよう!
ここでは、Search Console(サーチコンソール)にサイトを登録方法を、一から画像を使いつつ、分かりやすく紹介します。 事前準備 サーチコンソールを使うには、Google のアカウントが必要に...
Googleアナリティクス登録・設定手順【これさえ読めばOK!】|アクセス解析ツール「AIアナリスト」ブログ
Googleアナリティクスの登録・設定の手順を詳しく解説しています。トラッキングの設置方法や実際のレポート項目の見方などもまとめているので、初めての方にも簡単に導入することができます。この記事を参考にGoogleアナリティクスに登録してサイトを分析してみましょう!
GoogleタグマネージャのトラッキングID設定方法
タグマネージャ登録をするとアナリティクスのトラッキングID登録は不要です。
GoogleタグマネージャでAMP用のトラッキングIDの設定方法
Cocoonテーマで、Googleタグマネージャを用いてAMPページの計測を行う方法です。通常のWEB用コンテナとは別に、AMP用コンテナを作成して、IDを新規作成する必要があります。
設定項目

  • サイト管理者に対してアクセス解析タグの出力設定
  • Google タグマネージャのトラッキング ID 設定
  • AMP 用 Google タグマネージャのトラッキング ID 設定
  • Google Analytics のトラッキング ID 設定
  • Google Search Console のサイト認証 ID 設定
  • その他サービスのアクセス解析・サイト認証タグの設定

【インデックス】

リスト表示の設定です。

変更内容

  • 「並び順」を「更新日」に変更
  • 「投稿関連情報の表示・スマホ端末でスニペットを表示」にチェック
  • 「投稿日の表示」「更新日が存在しない場合は投稿日を表示」のチェックを外す

並び順は、単に好みの問題です。

スマホ端末でスニペットを表示は、記事タイトルだけだと分かりにくいと思うので、追加していた方が良いと思います。

投稿日・更新日は、常に更新するのであれば、表示した方が良いかもしれません。

しかし、常に記事を更新することはあまりないと思うので、表示しない方が無難でしょう。

設定項目

  • 一覧リストを表示する順番
  • 一覧リストのカード表示形式(縦型カード 2列・タイルカード 3列など)
  • スマホ端末で縦型&タイル型のエントリーカードを 1カラムにする設定
  • 投稿エントリーカードの枠となる罫線の表示
  • エントリーカードで、本文から自動生成される抜粋文の最大文字数
  • 抜粋文字数を超えたときに表示する省略文字
  • スニペット(抜粋)の表示
  • スマホ端末でスニペットを表示
  • 投稿日の表示
  • 更新日が存在しない場合は投稿日を表示する
  • 更新日の表示
  • 投稿者名の表示
  • コメント数の表示

【投稿】

投稿本文下のカテゴリとタグの表示・関連記事の表示・ページ贈りナビゲーション・パンくずリストの設定です。

変更内容

  • 「関連記事設定・カードの枠線を表示する」にチェックを入れる
  • 「関連記事設定・更新日が存在しない場合は投稿日を表示」のチェックを外す
  • 「パンくずリスト設定・パンくずリストに記事タイトルを含める」にチェックを入れる

カードの枠線は、背景が白色の場合に分かりやすくするために表示しましょう。

更新日は、Cocoon 設定【インデックス】と同じ理由です。

「パンくずリストに記事タイトルを含める」は、出力しておいた方が、ユーザーが分かりやすいと思います。

設定項目

  • カテゴリとタグの表示
  • 投稿ページの関連記事の表示
  • 関連記事にカテゴリーを関連づけるかタグを関連づけるか
  • 関連記事の見出し
  • 関連記事の補助となる見出し
  • 関連記事の表示タイプ
  • 関連記事で表示する投稿数
  • 投稿エントリーカードの枠となる罫線の表示
  • 関連記事エントリーカードで、本文から自動生成される抜粋文の最大文字数
  • スニペット(抜粋)の表示
  • スマホ端末でスニペットを表示
  • 投稿日の表示
  • 更新日が存在しない場合は投稿日を表示する
  • 更新日の表示
  • 投稿者名の表示
  • ページ送りナビの表示
  • ページ送りナビの表示タイプ
  • ページ送りナビを囲む枠線の表示
  • 投稿ページにコメントの表示
  • パンくずリスト表示位置
  • パンくずリストに、表示されているページのタイトルを含めるか

【固定ページ】

固定ページのコメント・パンくずリストの設定です。

変更内容

  • 「パンくずリスト設定・パンくずリストに記事タイトルを含める」にチェックを入れる

「パンくずリストに記事タイトルを含める」は、上記、Cocoon 設定【投稿】と同じ理由です。

設定項目

  • 固定ページのコメント表示
  • 固定ページのパンくずリスト表示位置
  • 固定ページのパンくずリストに、表示されているページのタイトルを含めるか

【本文】

外部リンク動作・内部リンク動作・テーブル動作・投稿・固定ページの関連情報の表示に関する設定です。

変更内容

  • 「外部リンク設定・外部リンクの開き方」を、「新しいタブで開く」に変更
  • 「追加 rel 属性・noopenerを追加」にチェックを入れる
  • 「アイコンの表示」にチェックを入れる
  • 「レスポンシブテーブル・横幅の広いテーブルは横スクロール」にチェックを入れる
  • 「投稿関連情報の表示」の 3項目全てチェックを外す

外部リンクは、新しいタブで開いた方が、ユーザビリティ向上と離脱率の低下が望めます。

「追加 rel 属性」は、おまじないです。

「アイコンの表示」は、外部リンクである事をユーザーに伝えた方が親切でしょう。

「横幅の広いテーブルは横スクロール」は、読みやすさの向上。

「投稿関連情報の表示」は、好みですが、表示しない方が良いと思います。

設定項目

  • 本文内の外部リンクをどのように開くか
  • 本文内の外部リンクのフォロー状態を設定
  • 外部リンクの追加rel属性(noopener・noreferrer・external)
  • 外部リンクの右部に Font Awesome アイコンを表示するか
  • 外部リンクの右部に表示する Font Awesome アイコン
  • 本文内の内部リンクをどのように開くか
  • 本文内の内部リンクのフォロー状態を設定
  • 内部リンクの追加rel属性(noopener・noreferrer)
  • 内部リンクの右部に Font Awesome アイコンを表示するか
  • 内部リンクの右部に表示する Font Awesome アイコン
  • 横幅の広いテーブルは横スクロールするか
  • 投稿日の表示
  • 更新日の表示
  • 投稿者名の表示

【目次】

目次関連の設定です。

変更内容

  • 「目次表示の深さ」を、「H3 見出しまで」に変更
  • 「広告の手前に目次を表示する」のチェックを外す

あまり深い見出しまで、表示してしまうと、目次自体が読みづらくなります。

また、H3 までのサイトが多いです。

設定項目

  • 目次を表示する
  • 表示するページ(投稿ページ ・固定ページ)
  • 目次の上にラベル表示されるタイトル
  • 目次の表示切替機能の有効・無効
  • 目次を「開く」「閉じる」のキャプション
  • 最初から目次内容を表示する
  • 目次の表示条件
  • どの見出しの深さまで表示するか
  • 設定項目手前の数字の表示形式
  • 目次の表示位置
  • 広告の手前に目次を表示する

【SNS シェア】

本文上下シェアボタンの表示・Twitter 上でのツイート動作・Pinterest 共有・シェア数取得時のキャッシュ利用に関する設定です。

変更内容

  • 「本文上シェアボタン・表示切替・Google」のチェックを外す
  • 「本文上シェアボタン・表示切替・Pinterest」にチェック
  • 「本文下シェアボタン・表示切替・Google」のチェックを外す
  • 「本文下シェアボタン・表示切替・Pinterest」にチェック
  • 「メンション・ツイートにメンションを含める」にチェック
  • 「ハッシュタグ」にブログ名を入力
  • 「Pinterest 共有・Pinterest で画像をシェアする」にチェック

Google+ に関しては、2019/4 にサービスが終了するため、チェックを外しました。

「Google+」の終了が 2019年 8月から 4月に繰り上げ 5250万人に影響の新たなバグ発見で|ITmedia NEWS

設定項目

  • メインカラム本文上シェアボタンを表示
  • 本文上に表示するシェアボタン(Twitter・Facebook・はてブ・Google・Pocket・LINE@・Pinterest・タイトルとURLをコピー)
  • 本文上シェアボタンの配色
  • 本文上シェアボタンのカラム数
  • 本文上シェアボタンのロゴとキャプションの配置
  • 本文上にシェア数を表示
  • メインカラム本文下シェアボタンを表示
  • シェアを促すメッセージ
  • 本文下に表示するシェアボタン(Twitter・Facebook・はてブ・Google・Pocket・LINE@・Pinterest・タイトルとURLをコピー)
  • 本文下シェアボタンの配色
  • 本文下シェアボタンのカラム数
  • 本文下シェアボタンのロゴとキャプションの配置
  • 本文下にシェア数を表示
  • ツイートにメンションを含める
  • ツイート後にフォローを促す
  • ツイート時に含めるハッシュタグ
  • Pinterest で画像をシェアする
  • SNS シェア数のキャッシュを有効にする
  • キャッシュの取得間隔
  • 別スキームのSNSシェア数をキャッシュする

【画像】

投稿・固定ページの本文部分に関する画像の設定です。

変更内容

  • 「アイキャッチの表示」に関する項目のチェックをすべて外す
  • 「画像の囲み効果」は、「ボーダー(薄い枠線)」を選択
  • 「NO IMAGE 画像」の設定

「画像の囲み効果」は、白色が背景の画像の場合に、見やすくするためです。

「NO IMAGE 画像」は、Google などで検索すれば、すぐにフリーの画像を見つけられます。

設定項目

  • 本文上にアイキャッチを表示する
  • アイキャッチラベルを表示する
  • アイキャッチの中央寄せ
  • アイキャッチをカラム幅に引き伸ばす
  • アイキャッチにキャプションがある場合は表示する
  • アイキャッチ自動設定を有効にする
  • 画像を囲む枠線
  • リンク画像をクリックしたときの拡大効果の設定
  • サムネイル画像の縦横比率
  • サムネイルの Retin aディスプレイ対応
  • アイキャッチが存在しない場合に利用される画像ファイル

【ブログカード】

URL や URL リンクをブログカード形式で表示するための設定です。

変更内容

  • 「内部ブログカード・日付表示」は、「なし」を選択
  • 「内部ブログカード・リンクの開き方・新しいタブで開く」にチェック

この 2項目は、好みの問題ですので、お好きな方を選んでください。

設定項目

  • 内部ブログカード表示を有効にする
  • 内部ブログカードのサムネイルの表示位置
  • 内部ブログカードの日付表示
  • 内部ブログカードのリンクの開き方
  • 外部ブログカード表示を有効にする
  • 外部ブログカードのサムネイルの表示位置
  • 外部ブログカードのリンクの開き方
  • 外部ブログカードキャッシュのリフレッシュ間隔
  • 外部ブログカードキャッシュ更新モードを有効にする

【フッター】

フッターやクレジット表示設定です。

変更内容

  • 「フッター表示タイプ」を「メニュー&クレジット(中央揃え)」に変更

完全に好みの問題です。

設定項目

  • サイト下部(フッター部分)の背景色
  • サイト下部(フッター部分)のテキスト色
  • フッター表示タイプ
  • クレジット表記
  • フッターのメニュー幅(px 数で指定)
  • メニュー幅を均一にせずにテキスト幅で設定

【AMP】

AMP(投稿ページをモバイル上で高速表示させるための仕組み)に関する設定です。

変更内容

  • 「AMP 機能を有効化する」にチェック
  • Google 検索結果に表示される AMP 用のロゴ画像の設定

画面表示は、早いのにこしたことは無いので、AMP は有効にしておきましょう。

AMP に関しては、個別に指定することも可能です。

設定できる場所は、記事編集画面の右メニューにあります。

設定項目

  • AMP 機能を有効化する
  • Google 検索結果に表示される AMP 用のロゴ画像
  • リンク画像をクリックしたときの拡大効果の設定
  • インラインスタイルを有効にする
  • スキンのスタイルを有効にする
  • 子テーマのスタイルを有効にする
  • AMP ページを生成しないカテゴリ

【その他】

SSL 対応・ファイルシステム認証・日本語スラッグに関する設定です。

変更内容

  • 「日本語スラッグを半角英数字にする」にチェック

投稿記事の URL は、日本語では無く、半角英数字の方が良いと思います。

設定項目

  • 内部 URL を SSL対応(簡易版)
  • ファイルシステム認証を有効にする(KUSANAGI 等)
  • Simplicity から投稿設定を引き継ぐ
  • 日本語スラッグを半角英数字にする
いぬ先生
いぬ先生

変更したら、画面の一番下にある「変更をまとめて保存」を忘れないように!

初期設定(高速化)

左メニューの「Cocoon 設定」「高速化」をクリックしてください。

サイト高速化

サイト表示スピードの高速化設定です。

変更内容

  • 「ブラウザキャッシュ」にチェック
  • 「HTML を縮小化する」にチェック
  • 「CSS を縮小化する」にチェック
  • 「JavaScript を縮小化する」にチェック
  • 「Lazy Load を有効にする」にチェック

「追加 CSS」で、デザインを変更されている方は、反映されなくなるので、「CSS を縮小化する」はチェックしないでください。

「アイコンフォントの非同期読み込みを有効にする」は、β版なので正式版が出るまで無効にしておきます。

設定項目

  • ブラウザキャッシュの有効化
  • HTML を縮小化する
  • CSS を縮小化する
  • JavaScript を縮小化する
  • Lazy Load を有効にする
  • アイコンフォントの非同期読み込みを有効にする
いぬ先生
いぬ先生

画面の一番下にある「変更を保存」を押し忘れないように!

他にやっておきたい設定

ユーザー【あなたのプロフィール】

プロフィールを表示しない方は、必要ありません。

しかし、プロフィールを紹介することで、ブログへの信頼度が上がったり、個人の SNS アカウントを紹介することで、フォロワーが付きます。

新しく書いた記事を SNS で紹介すれれば、少ないかもしれませんが、見てもらえる可能性が高まります。

なので、できれば、プロフィールは、表示した方が良いでしょう。

左メニューの「ユーザー」-「あなたのプロフィール」をクリックしてください。

WordPress(ワードプレス)プロフィール設定 - 名前
  • 姓・名・・・入力しなくても、問題ありません
  • ニックネーム・・・好きなニックネームを入力してください
  • メールアドレス・・・普段使っているメールアドレスを登録しておけば OK
  • サイト・・・未入力でかまいません(私は、このサイトの URL 「https://seo.info-station.net/」を指定しています

各 SNS については、表示したいものだけ入力してください。

WordPress(ワードプレス)プロフィール - 自己紹介
  • プロフィール情報・・・簡単な自己紹介を入力しておきましょう
WordPress(ワードプレス)プロフィール設定 - 画像

プロフィール画像を入れたければ、「選択」ボタンをクリックして、アップロードしましょう。

画像は、240×240px の正方形の画像が推奨されています。

いぬ先生
いぬ先生

「プロフィールを更新」ボタンを押すのを忘れないように!

プロフィールは、設定しただけでは、表示されません。

左メニューの「外観」-「ウィジェット」をクリックしてください。

WordPress(ワードプレス)ウィジェット - プロフィール

「[C]プロフィール」という項目があるので、選択して、サイドバーの好きな場所に、ドラック&ドロップしてください。

WordPress(ワードプレス)ウィジェット - プロフィール 詳細設定

タイトルは、好きなもので構いませんが、例えば「プロフィール」と入力し、「保存」ボタンを押してください。

これで、以下のように、サイドメニューに表示されます。

WordPress(ワードプレス)プロフィール

インストールしておいた方がいいプラグイン

設定項目を紹介(対応不要)

対応する必要はありませんが、一応、設定できる項目だけ紹介しておきます。

【全体】

ページ全体の表示に関する設定です。

設定項目

  • サイト全体のポイントとなる部分に適用される背景色
  • サイト全体のポイントとなる部分に適用されるテキスト色
  • フォント
  • 文字サイズ
  • 文字色
  • モバイル端末でのフォントサイズ
  • フォントの太さ
  • サイト全体の背景色
  • サイト全体の幅
  • サイトで利用されるリンク色
  • サイト内のテキストを選択した際の文字色
  • サイト内のテキストを選択した際の背景色
  • サイト全体の背景画像
  • サイドバーの表示位置
  • サイドバーを表示するページ
  • サイト内のサムネイル画像の表示
  • 日付のフォーマット形式

【ヘッダー】

ヘッダーの表示設定を行います。

設定項目

  • ヘッダーの表示形式
  • ヘッダーの高さ(px数で指定)
  • モバイルでのヘッダーの高さ(px数で指定)
  • ヘッダー部分に表示する画像
  • ヘッダーロゴの縦横幅の指定
  • キャッチフレーズの表示位置
  • ヘッダー背景として表示する画像
  • ロゴ部分やグローバルナビ全てを含めた背景色
  • ロゴ部分やグローバルナビ全てを含めたテキスト色
  • グローバルナビ上のヘッダー背景色
  • グローバルナビ上のヘッダーテキスト色
  • グローバルナビ全体の背景色
  • グローバルナビ全体のテキスト色
  • グローバルナビのメニュー幅(px数で指定)
  • グローバルナビのサブメニュー幅(px数で指定)

【スキン】

スキンを変更することで、サイトのデザインを手軽に変更できます。

設定項目

  • スキンの選択

【広告】

アドセンス設定や、ウィジェットの設定など、広告全般に関する設定です。

設定項目

  • アドセンス設定、ウィジェット設定等、全ての広告の表示切り替え
  • 広告上部ラベルに表示されるテキスト
  • アドセンス広告全ての表示切り替え
  • アドセンスのレスポンシブ広告コード
  • リンクユニットのレスポンシブ広告コード
  • アドセンスの表示方法
  • 広告を表示する位置
  • 広告ショートコードの設定
  • 広告除外設定(記事・カテゴリ)

【カラム】

メインカラム・サイドバーの幅、余白幅、枠線の設定です。

設定項目

  • メインカラムのコンテンツ部分の幅
  • メインカラムコンテンツ両サイドの余白幅
  • メインカラムのボーダー幅
  • メインカラムのボーダー色
  • サイドバーコンテンツ部分の幅
  • サイドバーコンテンツ両サイドの余白幅
  • サイドバーのボーダー幅
  • サイドバーのボーダー色
  • メインカラムとサイドバーの間の幅

【SNS フォロー】

SNS のフォローボタンの表示に関する設定です。

設定項目

  • 本文下のフォローボタンを表示する
  • フォローを促すメッセージ
  • feedly フォローボタンを表示する
  • RSS 購読ボタンを表示する
  • シェアボタンの配色
  • フォローボタンを表示するユーザー
  • フォロー数を表示する
  • feedly 購読者数の指定
  • SNS シェア数のキャッシュを有効にする
  • キャッシュの取得間隔
  • 別スキームのSNSフォロー数をキャッシュする

【コード】

ソースコードのハイライト表示の設定です。

設定項目

  • 本文中に表示されている pre タグ中のソースコードをハイライト表示
  • ソースコードのハイライトテーマ
  • ソースコードをハイライトする CSS セレクター

【コメント】

コメント一覧や入力欄のみタグに関する設定です。

設定項目

  • コメントの表示形式
  • コメント一覧の見出し
  • コメント一覧の補助となる見出し
  • コメント入力欄の表示状態
  • コメント入力欄の見出し
  • コメント入力フォームの上に表示する案内メッセージ
  • ウェブサイト入力ボックスを表示する
  • コメントの送信ボタンのラベルテキスト

【通知】

サイト上部ベルト状に表示される通知メッセージの設定です。

設定項目

  • 通知エリアの表示
  • 通知エリアに表示するメッセージ
  • 通知エリアに設定するリンク URL
  • 通知リンクを新しいタブで開く
  • 通知の種類
  • 通知エリア背景色
  • 通知エリア文字色

【アピールエリア】

ヘッダー下でアピールしたい内容を入力します。

設定項目

  • アピールエリアの表示
  • アピールエリアの高さ(px 数で指定)
  • アピールエリアの背景に表示する画像
  • アピールエリア背景画像の固定
  • アピールエリアの背景色
  • アピールエリアのタイトル
  • アピールエリアに表示するメッセージ
  • ボタンに表示する文字
  • アピールエリアに設定するリンク URL
  • ボタン全体の色

【カルーセル】

ヘッダー下でカルーセル表示させたい投稿の設定を行います。

設定項目

  • カルーセルを表示するページ
  • カルーセルと関連付けるカテゴリ
  • カルーセルに表示するアイテムの最大表示数
  • カルーセルのカードの枠線を表示する
  • カルーセルのオートプレイを実行
  • カルーセルの自動送り間隔

【ボタン】

ページトップにスクロール移動するかボタンの設定です。

設定項目

  • トップへ戻るボタンを表示する
  • トップへ戻るボタンを示すアイコンフォント
  • ボタンの背景色
  • ボタンの文字色
  • アイコンフォント代わりに表示する画像

【モバイル】

モバイル環境で表示するレイアウトの設定です。

設定項目

  • モバイルボタンレイアウト
  • スライドインボタン時コンテンツ下のサイドバーを表示

【404 ページ】

ページが見つからなかった場合の 404 ページの表示設定です。

設定項目

  • 404 ページで表示する画像
  • 404 ページに表示するタイトル
  • 404 ページに表示するメッセージ

【管理者画面】

管理画面の機能・投稿一覧ページ・PV 表示や編集リンクの表示の設定です。

設定項目

【エディター】

投稿・固定ページ編集時に使うエディターの設定です。

設定項目

  • Gutenberg エディターを有効にする
  • タイトル等の文字数カウンター表示
  • ビジュアルエディターにテーマスタイルを反映させる
  • ページ公開前に確認アラートを出す

【API】

アフィリエイトタグ使用時に利用するアフィリエイトID の設定です。

設定項目

  • Amazon API を使用するためのアクセスキーID
  • Amazon API を使用するためのシークレットキー
  • Amazon アソシエイトのトラッキングID
  • Amazon カタログ写真を表示する
  • データー取得時点の Amazon 販売ページでの値段を表示
  • Amazon 商品リンクのロゴを表示する
  • Amazon のキーワード検索ボタンを表示する
  • Amazon の検索ボタンに表示するテキスト
  • Amazon 検索ボタンのリンクURL を商品詳細ページにする
  • 楽天API を利用するためのアプリケーションID
  • 楽天アフィリエイト用のID/li>
  • 楽天市場で同一商品が複数あった場合の表示優先度
  • データー取得時点の楽天市場販売ページでの値段を表示
  • 楽天商品リンクのロゴを表示する
  • 楽天のキーワード検索ボタンを表示する
  • 楽天の検索ボタンに表示するテキスト
  • 楽天検索ボタンのリンク先URLを商品詳細ページにする
  • バリューコマースsid(Yahoo!ショッピング)
  • バリューコマースpid(Yahoo!ショッピング)
  • Yahoo! のキーワード検索ボタンを表示する
  • Yahoo! ショッピングの検索ボタンに表示するテキスト
  • 広告リンクをもしもアフィリエイトを経由にする
  • もしもアフィリエイトの Amazon ID
  • もしもアフィリエイトの楽天ID
  • もしもアフィリエイトのYahoo! ショッピングID
  • API キャッシュのリフレッシュ間隔を設定

【リセット】

全テーマ設定の内容をリセットします。

設定項目

  • 全ての設定をリセットする
  • リセット動作の確認

【テーマ情報】

Cocoon 環境に関する情報です。

不具合報告 する場合は、ここに表示されている内容を、添付しましょう。

分からない事があれば・・・

Cocoon は、分かりやすいマニュアル や、フォーラム が用意されています。

分からない事や、躓いたことがあれば、調べるとほとんどの事が分かると思います。

コメント

  1. […] そこで、私はこちらの記事を参考にさせてもらいました。 […]

  2. […] まずは、そもそもの初期設定内容について。https://seo.info-station.net/wordpress-cocoon-initialization/ […]