タグ: カスタマイズ

カテゴリを作成して、記事にカテゴリ属性を付けることはよくありますね。

で、その作成したカテゴリ内の記事一覧を、管理画面から見る方法としては、

「投稿一覧」 から 指定のカテゴリを選択して絞込み検索をする事でできます。

訳あって、そういう機能を使いたくない。いちいち絞込み検索するまでの流れが面倒。

という方もいると思います。最初からサイドメニューに作成したカテゴリの記事一覧メニューが表示されて、クリックするだけでその記事一覧が表示されるように。

今回は、それをやりたいと思います。

ゴールとするメニューの例

「投稿」メニューと、「メディア」の間にカテゴリ一覧が表示されるようにしていきます。

まずはカテゴリ一覧を取得。

の前に。まずはフックさせます。

管理画面のメニューに追加する事は決まっているので、ご自身のテーマのfunctions.phpにて、admin_menuにアクションを追加します。

add_action( 'admin_menu' , 'my_admin_menu' );

今回は適当に、my_admin_menuという関数を用意する前提です。で、関数を用意。

function my_admin_menu() {

}

この関数内でカテゴリ一覧を取得したりメニューを追加したりしていきます。

じゃあまずは、カテゴリ一覧を取得

$args = array( 'hide_empty' => 0 );
$categories = get_categories( $args );
print_r($categories);

で、カテゴリ一覧が出力されます。表示が変にはなりますが、今はカテゴリを取得する事が目的なので、それは無視してください。

このカテゴリが表示されている順番の通りに、メニューが作成されることになりますので、順番を変更したい方は今のうちに順番を変更してください。

get_categories()については関数リファレンス/get categoriesを見てパラメータを設定すれば順番を変更できます。

ここまでで、カテゴリ一覧が取得できたらprint_rは消して下さいね。

管理画面サイドメニューへの追加

メニューへの追加方法は、add_menu_pageで追加する方法とglobal $menuを使って追加する方法の2種類は知っています。

どの方法でやろうかと考えましたが、今回は「カテゴリ一覧メニューの上下に、セパレーター（区切り線）も設置」するので、グローバル変数の$menuを使って追加していきます。

まずはこれを。

global $menu;
global $submenu;

print_r($menu);

どうですか？とりあえず上手く出力できましたか？

次に、この出力を「HTMLソース」から確認してください。

今回は「投稿一覧」と「メディア」の間に追加する予定です。配列のキーを見ると、投稿は5、メディアは10となっているのが分かると思います。このキーの小さい順に、wordpressの管理画面のサイドメニューは表示されているので、今回は7ぐらいのところにカテゴリ一覧のメニューを表示させたいと思います。

$slug = 'edit.php?cat=' . $categories[0]->cat_ID;
$menu[7] = array( $categories[0]->cat_name , 'edit_posts', $slug , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );

カテゴリ一覧で取得した最初のカテゴリを親メニューとしました。

確かに、記事一覧は指定のカテゴリの記事のみが表示されました。しかし、このままではメニューが「投稿」「投稿一覧」のままです。現在のページが、

edit.php?cat=*

ではなく、

edit.php

として認識されているようです。

なので、この部分を変更する為に、グローバル変数 $parent_file を変更します。

変更する為には現在のフックポイントとは別にフックしなければいけないので注意。

function edit_parent_file() {
 global $parent_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );
 $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
 }
}
add_action( 'admin_head', 'edit_parent_file');

これで、現在のメニューの設定が効くようになります。

この調子で、サブメニューも作成していきます。

先ほどのmy_admin_menu関数内にサブメニュー用に以下を追加。

foreach( $categories as $key => $cat ) {
 $slug_s = 'edit.php?cat=' . $cat->cat_ID;
 $position = $key + 1;
 $submenu[$slug][$position] = array( $cat->cat_name , 'edit_posts', $slug_s , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );
 }

これで、サブメニューができました。

が、またしてもサブメニューを選択しても、サブメニューが選択状態にならない。。

どうやら、グローバル変数 $submenu_file も少し変更しないといけないようですね。

先ほどのedit_parent_fileを少し変更して、

function edit_parent_file() {
 global $parent_file;
 global $submenu_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );
 $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
 $submenu_file = 'edit.php?cat=' . intval( $_REQUEST["cat"] );
 }
}
add_action( 'admin_head', 'edit_parent_file');

$submenu_file にあたる部分を追加しました。

これで、完成ですね。

すっかり忘れていました。区切り線を作成したメニューの上下に入れるのを。

$separator = array( '' , 'read' , 'separator' , '' , 'wp-menu-separator' );
$menu[6] = $separator;
$menu[8] = $separator;
ksort($menu);

※ちなみに、ksortを実行しないと、なぜか上下に区切り線が出ませんでした。

何度かコードを追加したりして分からなくなってきた方もいるかもしれませんので、コードを下記に記載します。

functions.php

function my_admin_menu() {

 $args = array( 'hide_empty' => 0 );
 $categories = get_categories( $args );

 global $menu;
 global $submenu;

 $slug = 'edit.php?cat=' . $categories[0]->cat_ID;
 $menu[7] = array( $categories[0]->cat_name , 'edit_posts', $slug , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );

 foreach( $categories as $key => $cat ) {
  $slug_s = 'edit.php?cat=' . $cat->cat_ID;
  $position = $key + 1;
  $submenu[$slug][$position] = array( $cat->cat_name , 'edit_posts', $slug_s , '' , 'menu-top menu-icon-post', 'menu-posts-cat' );
 }
 $separator = array( '' , 'read' , 'separator' , '' , 'wp-menu-separator' );
 $menu[6] = $separator;
 $menu[8] = $separator;
 ksort($menu);
}
add_action( 'admin_menu' , 'my_admin_menu' );

function edit_parent_file() {
 global $parent_file;
 global $submenu_file;
 global $current_screen;

 if( $current_screen->base == 'edit' && isset( $_REQUEST["cat"] ) ) {
  $args = array( 'hide_empty' => 0 );
  $categories = get_categories( $args );
  $parent_file = 'edit.php?cat=' . $categories[0]->cat_ID;
  $submenu_file = 'edit.php?cat=' . intval( $_REQUEST["cat"] );
 }
}
add_action( 'admin_head', 'edit_parent_file');

ログイン画面のカスタマイズを、もっと深くカスタマイズする方法を紹介していこうと思い、記事を書こうと思いましたが、記事のタイトルをどうしようか迷いました。

というのも、クライアントに納品するwordpressの管理画面カスタマイズ vol.4にてログイン画面の簡単なカスタマイズ方法を紹介、クライアントに納品するwordpressの管理画面カスタマイズ vol.5にてクライアントへの状況案内の記事を作成済みで、この記事の番号は・・・4と5の間ぐらいだろ～な～ということで、タイトルは4.5としています。。

分かりづらっ！

1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

この記事はちょっと長いです。なので、先にこのようなログイン画面が作れるますよーとここに表記しておきます。

まずはvol4のこのようなカスタマイズ方法は簡単ですね。

でも、クライアントへCMSとして提供するので、もっと自社のCMSらしいデザインにしたい。

もっとより深いカスタマイズをしたい。そういったカスタマイズ方法を記載しています。

まずはデフォルトのログイン画面を確認

いつものログイン画面です。この画面をカスタマイズしていきます。

Yahoo!っぽいやつを参考として

今回カスタマイズ後の画面をヤフーのログイン画面風と決めました。

ヤフーのログイン画面をおおまかに分けると、

• ヘッダー（ロゴ、ヘルプへのリンク、パスワード変更の案内）
• コンテンツ（ログインフォーム、広告的なリンク？）
• フッター（いろんなリンク）

です。（おおざっぱ過ぎ？）

じゃあさっそくやっていきましょ。

全体枠

管理画面で全体の幅を指定しているのは#loginとなっていますので、#loginのスタイルをまずは変更。

※管理画面にCSSの読み込み方が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

Yahooは950pxなので、ここは同じように。

#login {
 width: 950px;
 margin: 0 auto;
 padding: 10px 0;
}

これで、全体の幅が大きくなりました。

やけに入力フォームが長いですが、今は気にせず。

次に、ロゴ画像の変更。

ここはヤフーと同じサイズの幅141px、高さ36px設定で。 （画像へのパスは設置したパスに変えてね。）

ここで注意ですが、ロゴ画像のサイズを変更する際、background-sizeの値をautoもしくはその画像のサイズにして下さい。でないと、作成したロゴ画像がbackground-sizeで指定したサイズに無理やり伸縮されます。

#login h1 a {
 width: 141px;
 height: 36px;
 background-image: url(./logo.png);
 background-size: auto;
 padding: 0;
}

せっかくなので、マウスオーバーも。

#login h1 a:hover {
 background-image: url(./logo_hover.png);
}

ちょっとロゴの上下の余白が狭く感じるので、余白もつけます。

#login h1 {
 padding: 18px 0;
}

うん、こんな感じでしょう。

次はログインフォーム。

ヤフーのログインフォームは右側に位置していて、上に10px、右に10pxの余白、幅は275px となっています。
ここも同じように変更していきます。

ソースを見ると、form の idはloginformとなっていて、いかにも#loginformとしてCSS設定をしていそうですが、ここのCSS設定は .login form にて設定されているので少し注意。

.login form {
 width: 275px;
 margin: 10px 10px 0 auto;
}

これで、このようになります。

ログインフォームが右に寄った事で、左側の広告にあたるような部分の空白がなんとも気になりますが、今はそのままで。

あ、「パスワードをお忘れですか？」の部分もここは右に移動させましょうか。

.login #nav, .login #backtoblog {
 width: 275px;
 margin: 10px 10px 0 auto;
}

余計空白が目立ちましたが、まだそのまま。フッターにリンクを表記していきましょう。

※ログイン画面フッターにリンクを表記する方法が分からない人はクライアントに納品するwordpressの管理画面カスタマイズ vol.4を読んでね。

ヤフーは色々ありますが、今回は「お問い合わせ」とコピーライトの表記をします。

ソースはこれ。

<div class="footer">
 <ul>
  <li>
   <a href="#">contact</a>
  </li>
 </ul>
 <p class="copyright">Copyright (C) 2013, SAMPLE. All Rights Reserved.</p>
</div>

こんな感じに設定。

cssはこんな感じに。

.login .footer {
 width: 950px;
 margin: 0 auto;
 text-align: center;
 border-top: 1px solid #777;
 padding: 10px 0 12px;
}

で、それらしくなってきました。

次は、ロゴの右側にもお問い合わせのリンクを設置（ヤフーでいう、ヘルプの代わり）

フッターに独自の表記を追加する場合は、WordPressにてアクションフックが既に用意されているので簡単ですが、ヘッダーのロゴの近くにソースを追加するとなると、どのフックなのか。

調べてみましたが、見当たらず….。 😳

しょうがないので、ここはJavascript(jQuery)で要素を追加していきます。

ここでロゴ周りのソースを確認。

<div id="login">
 <h1>
  <a href="wordpress.org">site name</a>
 </h1>
 ******* here **********
 <form name="loginform" ....

#login直下のh1の周辺に、お問い合わせのリンクのソースを追加します。
橙字で here と記載した部分です。

まずは、Javascriptファイルを読み込ませる為に、functions.phpに以下を記載。

function mylogin() {
 wp_enqueue_script( 'my-login-js' , get_template_directory_uri() . '/login.js' , array( 'jquery' ) );
}
add_action( 'login_head' , 'mylogin' );

これで、http://サイトURL/wp-content/themes/テンプレートディレクトリ/login.js

というJavascriptファイルがログイン画面に読み込まれます。

login.jsファイルを用意し、まずはちゃんとファイルが読み込まれているかどうかを確認する為に以下のコードを記載。

jQuery( function($) {
 alert('test');
});

これで「test」とアラートが出たら、正常に読み込まれています。
（アラートが出ない人は何かの記述が間違っているか、既にどこかでJavascriptのエラーが発生していると思われます。コンソールを確認してみてください）

まずは、お問い合わせリンクを、h1要素の後に追加します。

$(".login #login h1").after('<p><a href="#">***************</a></p><div class="clear"></div>');

これで、お問い合わせリンクが追加されました。

後は追加した要素にCSSを設定。

#login .head_link {
 float: right;
 width: 270px;
 padding: 24px 14px 0;
 text-align: right;
}

h1要素にfloat: leftを指定するのを忘れずに。

#login h1 {
 padding: 18px 0;
 float: left;
}

これで、このようになります。

こんな調子でどんどんいきましょう。

次に、ログイン画面左側の大きな余白の広告面っぽい部分。そのままではスタイルを適用するのが難しい為、ログインフォーム自体をdivで囲みます。

jsファイルに下記を追記してください。

$(".login #loginform").wrap('<div class="my-login-form" />');

すると、

.my-login-formというクラスのdivで、ログインフォームを囲う事ができます。あとはいつも通りCSSの設定です。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
}

login_bg.pngは、幅950px、高さ480pxのただのオレンジ色の画像を用意。

これで、

このようになります。

よく見ると、あれ！？フォームが上にくっつき過ぎですね。
「パスワードをお忘れですか？」も下のほうにいきました。

なぜでしょう。ログインフォームにマージントップ10pxは指定されていますが。

まぁいいや、として。まずはログインフォームが上にくっつき過ぎている点を修整します。

.my-login-form {
 width: 950px;
 height: 480px;
 background: url(./login_bg.png) no-repeat 0px 0px;
 padding-top: 1px;
}

padding-topを追加。

次に、「パスワードをお忘れですか？」の部分を移動させる為に、jsファイルに以下を追記してください。

var $LosgPass = $(".login #backtoblog").clone();
$(".login #backtoblog").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );

var $LosgPass = $(".login #nav").clone();
$(".login #nav").remove();
$(".login #loginform").after( $('<div>').append( $LosgPass ).html() );

これで、ほぼ完成してきました。

この時点で一旦、IETesterを使用して、IE8で確認しましたが、表示の崩れはありませんでした。

最後に、ログインフォームのデザインを変更していきます。

ちなみに、これはヤフーのログインフォーム。

Yahooのログインフォームの場合、「ユーザー名」「パスワード」という表記部分が、入力する部分に記載されているかのように見え、クリックすると真っ白になります。

WordPressのログインフォームのソースは以下のようになっています。

このソースをベースに、色々と改変していきます。

ここは少し難しいです。

まず、ユーザー名と記載されている部分が、一切タグで囲まれていないのでとても扱いづらい。

なので今回はspanタグで囲み、CSSを適用してカスタマイズする事にしました。

その囲ったspanタグは、inputにfocus&blurした際に、IDが入力されているかどうかのチェックで表示するorしない。と表示を変更する仕様にします。

jsファイルは以下。

var $UserField = $(".login #loginform p:eq(0)");
 var $UserFieldClass = $("label" , $UserField).attr("for");
 var $UserFieldValue = $("input" , $UserField).val();

 $UserField.attr( "class" , $UserFieldClass );
 $("label br" , $UserField).remove();

 $("label" , $UserField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $UserFieldValue != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }

$("input" , $UserField).focus(function() {
 $("span" , $UserField).hide();
 });
 $("input" , $UserField).blur(function() {
 if( $("input" , $UserField).val() != "" ) {
 $("span" , $UserField).hide();
 } else {
 $("span" , $UserField).show();
 }
 });

 var $PassField = $(".login #loginform p:eq(1)");
 var $PassFieldClass = $("label" , $PassField).attr("for");
 var $PassFieldValue = $("input" , $PassField).val();

 $PassField.attr( "class" , $PassFieldClass );
 $("label br" , $PassField).remove();

 $("label" , $PassField).contents().filter(function() {
 return this.nodeType == 3 && !/\t/.test(this.data);
 }).wrap("<span/>");

if( $PassFieldValue != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }

$("input" , $PassField).focus(function() {
 $("span" , $PassField).hide();
 });
 $("input" , $PassField).blur(function() {
 if( $("input" , $PassField).val() != "" ) {
 $("span" , $PassField).hide();
 } else {
 $("span" , $PassField).show();
 }
 });

cssは以下。 

.login #loginform p {
 position: relative;
}
.login #loginform p label span {
 position: absolute;
 font-size: 16px;
 top: 10px;
 left: 8px;
}
.login #loginform .user_pass {
 width: 70%;
 float: left;
}

ただ、このままだと、

float のおかげで表示が崩れます。なので、追加でjsファイルに以下を。

var $Forget = $(".login #loginform .forgetmenot").clone();
 $(".login #loginform .forgetmenot").remove();
 $(".login #loginform .submit").after( $('<div>').append( $Forget ).html() );

$(".login #loginform .forgetmenot").after( '<div class="clear"></div>' );

これで、どうでしょう。ばっちりじゃないでしょうか。念の為IEでチェック。

ばっちりですね。

ユーザー名をクリックすると、

入力フィールドが空になります。ユーザー名を入力すると、その入力名を維持しているように見えます。

これで、完璧。なんじゃないかな。 🙂

あとは背景やログインフォーム部分をもう少し凝ったりして、

このようにもできるはずです。是非お試しください。

写真：http://www.pakutaso.com/

前回、プラグイン設定画面の画面構成及びレイアウトを考えてみるという記事で、wordpressプラグインのユーザーがどれくらいプラグイン開発者のサイトに訪れているのか調べ、それを上げる可能性について書きました。

全部で10個プラグインを開発していますが、前回の記事を書いた後にちょこちょこレイアウトを変更しました。

そして、その数字が上がったのか、変わらないのかを書こうと思ったのですが…。

その前に。一応、前回の数字のデータはこうでした。
2/20～3/20までの1ヶ月間で、6人の訪問者。

じゃあ今回はどうかな～と期待を膨らませ、この数字を思い出しました。
今回も同じように訪問率を出そうと、[ 訪問者数 ÷  全ダウンロード数 × 100 ] としようとしました。

ここでひとつ疑問が。
前回は合っていると思い、この計算式で出した数字が約0.08%でしたが。 😕

全ダウンロード数 = プラグインを配布している全期間の全プラグインのダウンロード数。

今回の数字を出すためにこの数字を使うと、全期間だから前回の数字も含まれてしまうから正しい数字は出ないじゃないか。

えっ？比較できない？ 😕

…

…

…

wordpress.orgで期間別にプラグインダウンロード数が見れればいいのに。

なので、比較は出来ない。という事にします。
参考にしようとしていた方がいたらごめんなさい 😉
（ほとんどいないと思いますが）
ただ、レイアウト変更後に2件、寄付代わりのプラグインの購入がありました。
とても嬉しかった。

同じように、
他のプラグイン開発者の方のモチベーションアップになるかもしれない、
とてもいい機能のプラグインを配布している開発者なのに、情報が伝わらない為にサイトに訪れる機会が少ない等、そういった所を少し上げる方法になるのではと思い、私の場合のプラグイン設定画面の画面構成を下に書きます。

是非、参考になれば。

実際のレイアウト変更後

前回の様々なプラグインの設定画面を参考に、私はこのように構成を変更しました。

まずは、プラグイン一覧の画面

サポートフォーラムへのリンクを追加しました。フックする方法はplugin_action_linksで調べてね。簡単です。

 次に、プラグイン設定画面

全体はこんな感じです。分かりづらいですね。ひとつずつ細かく伝えていきます。

まずはプラグイン設定画面の上部。

プラグインの設定画面の上部のみ、このように寄付の検討をお願いします。と表記しました。
もちろん、基本は英語で。

英語が自信無い方へ。

大丈夫です。
私は英検4級を、約13年前に取ったっきりでそれ以来英語を勉強する機会はありませんでした。
この記事を読んでいるあなたよりも、私のほうが英語力は自信ありません。
なんとか、出来る限り伝わるように、返事を書いています。
そんな私でも、一応、今のところはなんとかなっています。
ただ、一人だけ途中で返事を放棄された外国人がいたり、なんだこの変な名前はと言われたり、あなた裏がありそうで怖いよーなんて言われたり 😳

次によこ。

私のアカウントはそうでしたが、paypalで寄付リンクを作成することが出来ませんでした。
色々ネットで調べてみても、日本の法律で寄付はダメらしい。個人間送金はダメらしい。
みたいな記事がいくつかあったので、私の場合は寄付の代わりとして、満足できたらこのプラグイン買ってね。と表記しています。

ただ、寄付代わりにプラグインを購入した後にも、寄付のリンクが出続けるのは嫌だろうなぁ～と思い、寄付のメッセージを削除するための削除キーとするものを入力すると、寄付の案内が一切表示されない仕様にしています。（バグがあったりするかもしれないので、まだ途中）

次にその下。

実際に動作確認をしたwordpressのバージョンを表記したり（安心すると思い）、開発者についての情報を色々と表記しました。
特に感じた事は、自分で実際に使っていて、バグが見つかる事はありますが、バグの報告や質問をしてくる方が非常に少ない。これを何とかしたいと思い、とにかくwordpress.orgのサポートフォーラムへ質問してね。的な表記をしています。

ただ、wordpress.orgのアカウントを持っていない方もいるはずなので、私へのお問い合わせへのリンクを付ける予定です。

さらに下。

他のプラグインも使ってみてよ。と案内しています。自分が行おうとしているカスタマイズが既にプラグインとして配布されているなら、まずはインストールして使ってみる方のほうが多いと思います。

私のプラグインのほとんどが管理画面カスタマイズ系なので、ほとんどプラグインユーザーの属性は運よく一致するので、案内はし易いと思っています。

 最後に、フッター。

これ、意味あるの？と思われる方もいるかもしれません。
後で実際の数字をお見せしますが、少し効果はありました。

ただ、プラグインの設定画面のフッターだけ、このようにしています。
管理画面全てをこのようにはしていません。
(ただ、フックするタイミングを間違えて公開して、全管理画面のフッターがこのようになる事はありました 😳

プラグインの設定画面の構成は以上のようにしました。

レイアウト変更後の数字

レイアウト変更を、３月の後半ぐらいに行いました。
レイアウトを変更した後は、googleのURL生成ツールのカスタムキャンペーンを使用して、どのリンクをクリックしたのかを計測できるようにしました。
以下のアクセス解析の画面は3/27～4/8の約2週間の数字です。

この中に、参照元が[use_plugin]となっている項目が、プラグイン設定画面からのアクセスです。

その中の数字だけを表示させると、

このようになっています。見づらい方は画像をクリックして拡大してください。

• donate : 寄付お願いします。のリンク
• side : 開発者のサイトはこちら。のリンク
• footer : 設定画面フッターのリンク
• translation : 翻訳お願いします。のリンク
• list : プラグイン一覧画面からのリンク

これが詳細です。以外にフッターからのリンクが多いなぁと感じました。

全合計は63アクセス。この数字を前回と比較したかったのです。
前回はこの数字が無いので、今後この数字を比較していって、プラグイン開発に役立てていこうと思います。

ちなみに。

こういう風に見ることもできます。”広告のコンテンツ”という項目名は気にしないでください。
広告のコンテンツという部分に、プラグイン名を省略したものを指定して、どのプラグインのどのリンクをクリックしたのかが分かるようにしています。

2番目の「Screen Options and Help Show Customize」というプラグインの翻訳についてのクリックが多い事には驚きました。

3番目はリンクの設置間違いでこうなってしまいました。 😥

やはり、プラグイン一覧に設置しているリンクは、かなりクリック数が少ない事が分かります。

プラグイン設定画面からサイトへの訪問を促したい方へ

まずは、プラグイン設定画面からのリンクを計測することをおすすめします。

googleのURL生成ツールのカスタムキャンペーン

こちらからできます。Google Analytics専用だと思います。

私の場合だと、このようになります。

https://gqevu6bsiz.chicappa.jp/?utm_source=use_plugin&utm_medium=side&utm_content=plvc&utm_campaign=1_1

• utm_source = プラグイン設定画面からのリンク識別
  
• utm_medium = どのリンクをクリックしたか
• utm_content = プラグイン名
• utm_campaign = プラグインの使用バージョン

使用バージョンは特に必要ないかなとは思いましたが、一応念の為としてつけています。
後々必要になってくるかもしれないし。

どうぞ、プラグイン設定画面を参考にしてみたい方は参考にしてください。