Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoon管理者パネルの設定とサンプル+表示ボタンのリンク先一覧

スポンサーリンク
設定
この記事は約3分で読めます。

Cocoonには、色々な便利な機能やエリアが用意されています。今回は、PV数、編集リンクや、スピードチェック、レスポンシブチェックなどのチェックツールへのリンクを表示できる管理者パネルについてです。

以下のような形で、サイトの下部にログイン中の管理者にのみ表示されます。

Cocoon管理者用バー(管理者パネル)

PV(ページビュー)を表示する設定で、記事一覧にも各記事のPVが表示する事も出来ます。

 

スポンサーリンク

管理者画面を設定する

Cocoon設定」を開きます。

Cocoon設定

管理者画面」タブを選択します。

Cocoon設定・管理者画面

設定項目
  • 管理者メニューの表示・非表示
  • 投稿一覧に表示する項目(作成者・カテゴリー・タグ・コメント・日付・投稿ID・文字数・アイキャッチ・メモの内容)
  • 管理者パネルの表示・非表示
  • PVエリアの表示・非表示
  • インデックスPV表示・非表示
  • 編集エリアの表示・非表示
  • AMPエリアの表示・非表示
  • チェックツールエリアの表示・非表示
    • PageSpeed Insights
    • GTmetrix
    • モバイルフレンドリーテス
    • 構造化データチェック
    • HTML5チェック
    • HTML5アウトラインチェック
    • SEOチェキ
    • ツイートチェック

 

管理者パネルの表示

以下から選択します。
  • 全て表示
  • PCのみ表示(デフォルト)
  • モバイルのみ表示
  • 表示しない

管理者パネル設定

 

 

PVの表示

PVエリアを表示する」にチェックを入れます。
インデックスにPV数を表示」にチェックを入れると、記事一覧で表示されている各記事ごとのPV数も表示されます。

 

管理者パネル設定

サイトのPVエリア表示例

サイトのPVエリア表示例

記事一覧の各記事PVエリア表示例

記事一覧・PV数

編集エリアの表示

編集エリアを表示する」にチェックを入れます。

管理者パネル設定

表示される「編集」のリンクを押すと、対象記事の編集画面へ遷移します。

編集エリア表示例

編集エリア表示例

AMPエリアの表示

AMPエリアを表示する」にチェックを入れます。

管理者パネル設定

 

AMPエリア表示例

AMPエリア表示例

リンク先

AMPページへ:対象記事のをAMP表示

Google AMPテスト:https://search.google.com/test/amp

Google AMPテスト

The AMP Validator:https://validator.ampproject.org/

AMPBench:https://ampbench.appspot.com/

チェックツールエリアの表示

「チェックツールエリアを表示する」にチェックします。

管理者パネル設定

チェックツールエリアの表示例

チェックツールエリアの表示例

リンク先

PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/

GTmetrix:https://gtmetrix.com/

モバイルフレンドリーテスト:https://search.google.com/test/mobile-friendly

構造化データ テストツール:https://search.google.com/structured-data/testing-tool#

HTML5:https://validator.w3.org/nu/

アウトライン:https://gsnedders.html5.org/outliner/

SEOチェキ:http://seocheki.net/

ツイート検索:https://twitter.com/search

レスポンシブツールエリアの表示

「レスポンシブチェックを表示する」にチェックします。

管理者パネル設定

レスポンシブツールエリアの表示例

レスポンシブツールエリアの表示例

リンク先

レスポンシブテスト

Sizzy

Resolution Test

 

 

コメント

タイトルとURLをコピーしました