wordpress plugin Post Lists View Custom version up 1.4.1

様々な一覧画面のカスタマイズができる

Post Lists View Custom

のバージョンアップをおこないました。

最新バージョンは1.4.1。

 

 

やったこと

一覧画面にアイキャッチ画像やカスタムフィールドに指定している画像を表示することができますが、
このサムネイル画像のサイズを自由に変更できるようになりました。

サムネイル画像サイズ設定画面
サムネイル画像サイズ設定画面

 

ダウンロードはこちらです。

http://wordpress.org/extend/plugins/post-lists-view-custom/

 

管理画面サイドメニューにカテゴリ内記事一覧のメニューを

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

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

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

投稿一覧カテゴリ選択部分
投稿一覧カテゴリ選択部分

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

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

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

 

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

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

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

 

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

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

管理画面のメニューに追加する事は決まっているので、ご自身のテーマの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 出力結果

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

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

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

 

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

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

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

まずはこれを。

global $menu;
global $submenu;

print_r($menu);

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

$menu 出力
$menu 出力

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

htmlソース
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.5

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

というのも、クライアントに納品する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のこのようなカスタマイズ方法は簡単ですね。

ログイン画面4
ログイン画面4

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

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

 

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

ログイン画面
ログイン画面

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

 

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

ログイン画面
参考にするヤフーのログイン画面

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

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

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

です。(おおざっぱ過ぎ?)

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

 

全体枠

ログインフォームの全体枠css
ログインフォームの全体枠css

管理画面で全体の幅を指定しているのは#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のエラーが発生していると思われます。コンソールを確認してみてください)

javascriptの例
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;
}

ただ、このままだと、

jscss適用後
jscss適用後

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でチェック。

IE8  & IE9 での表示チェック
IE8  & IE9 での表示チェック

ばっちりですね。

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

ユーザー名クリック
ユーザー名クリック

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

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

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

ログイン画面サンプル
ログイン画面サンプル

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

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

wordpress plugin WP Admin UI Customize version up 1.2.3

wordpressの管理画面カスタマイズプラグイン、

WP Admin UI Customize

の更新を行いました。

最新バージョンは1.2.3です。

 

やったこと

WordPressの管理画面(例えばダッシュボードのページ)を、ブラウザのお気に入りやブックマークに追加すると、

ダッシュボード < サイト名 – WordPress

というタイトルタグとなっているので、この名称がそのままブックマーク名となります。(自分で変更すればいい話ですが)

この管理画面のタイトルから、-Wordpressを取るだけの機能を追加しました。

ダッシュボード < サイト名

こういう感じです。

それと、ダッシュボードのメタボックスはドラッグ&ドロップで移動が出来るようになっていますが、メタボックスの移動を出来ないよう制限する機能を追加しました。(必要性少なっ)

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/wp-admin-ui-customize/

 

それと、

このプラグイン、WP Admin UI Customizeですが、後々マルチサイトのアドオンを有料で販売しようと考えていて、その販売サイト兼機能紹介サイトを別に作成しました。

今後、WP Admin UI Customizeに関してはそのサイトで機能の追加等はアップしていきます。
(そっちのほうが見やすく作られています。)

こちらからどうぞ。

http://wpadminuicustomize.com

日本語サイトはこちら

http://wpadminuicustomize.com/ja

プラグイン設定画面の画面構成及びレイアウトを考えてみる-その後

前回、プラグイン設定画面の画面構成及びレイアウトを考えてみるという記事で、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のアカウントを持っていない方もいるはずなので、私へのお問い合わせへのリンクを付ける予定です。

 

さらに下。

プラグイン集
プラグイン集

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

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

 

 最後に、フッター。

フッター
フッター

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

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

 

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

 

レイアウト変更後の数字

レイアウト変更を、3月の後半ぐらいに行いました。
レイアウトを変更した後は、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専用だと思います。

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

http://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 = プラグインの使用バージョン

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

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

wordpress plugin screen options and help show customize version up 1.2.1

管理画面内の上のほうにある、「表示オプション」と「ヘルプ」メニューの表示カスタマイズができる

Screen Options and Help Show Customize

のバージョンアップをおこないました。
最新バージョンは1.2.1。

 

やったこと

マルチサイトにはまりました…。

マルチサイトの機能を前回付けたのですが、通常のノーマル?のサイトで上手く動かないバグが発生していたので修正しました。

 

そして、プラグイン設定画面のレイアウトを少し変更しました。

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/screen-options-and-help-show-customize/

 

もしくは、管理画面のプラグインから、「Screen Options and Help Show Customize」と検索して、インストールしてください。

プラグイン設定画面の画面構成及びレイアウトを考えてみる

今のところ、3/23の時点で、wordpress.orgにて配布している私のプラグインは合計10個、
全てのプラグインのダウンロード数は、総数 6,825 ダウンロードとなりました。

だいたい200~2,000まで、ダウンロード数はばらばら。

多いのか、少ないのか。ぴんときませんが、メジャーなプラグインのダウンロード数と比較すると…

かなり少ない…でもしょうがない。
役目が違うという事と、認知度と、使いやすさや便利さ、機能性にもよるだろうし。

でも、それぐらいのユーザーが居る。という事は分かります。

 

ただ、この約6,800というダウンロード数から、何%の人がプラグイン開発者のサイトに訪れているのか

一人のユーザーが何回も同じプラグインを使うことはもちろん考えられます。
今は一旦、それはおいておきます。

 

寄付のリンクを何人がクリックしたか調べてみたのですが、2/20~3/20までの一ヶ月間で、たったの6人。

つまり、私の全プラグインの場合だと 約0.08% の人が訪れる 計算。

確かにダウンロード数は少ないでしょうがないかもしれませんが、いくら何でも訪問者少なすぎでしょ! 😯

 

では、この 0.08% のサイトへの訪問率をどれだけあげることができるのか?

ということでwordpressのプラグイン設定画面にて、プラグインの画面構成・レイアウトを変えて(目障りにならない程度に)、サイトへの訪問率をどれだけ上げることができるのかをやっていくことにしました。

 

なので、この記事は使いやすいプラグインのレイアウト紹介というわけではなく、どうやったら開発者のサイトへ訪れてくれる確立を増やす事が出来るか、寄付や有料版の案内を上手くできるかという点のみを考慮しての、画面構成・レイアウトを考える記事となります。

 

特にゴールとするレイアウトは何もありませんが、まずは有名どころのプラグインを片っ端からダウンロードしてインストールしてみて、いいところだけをパクる学んで取り入れようということに。

そこから、ゴールとするレイアウトが見えてくるのでは?という考えです。

 

それから、有名プラグインをインストールしてプラグインの設定画面が参考になるものを探してみました。

wordpress.org で Most Popular のページに行くと有名どころのプラグインがずらり。

http://wordpress.org/extend/plugins/browse/popular/

 

いくつかインストールして設定画面を見てみました。
そのなかからおすすめしたいプラグインの設定画面を10個ほど、厳選して紹介してみます。

プラグイン設定画面・レイアウトづくり参考プラグイン

1.WordPress SEO by Yoast

wordpress seo by yoast
wordpress seo by yoast

かなり力を入れている気がします。右側にイラスト付きのバナーなので、目がいきますね。
ただ、左側の「ダッシュボード」的な表示はかなり邪魔に思いました。。

画面幅も考えられていますね。
画面の幅を小さくすると右側のバナーが下にずれるので、横スクロールバーが表示されるのを極力避けています。

wordpress seo by yoast smallwidth
wordpress seo by yoast smallwidth

2.Google Analytics for WordPress

一瞬、「えっ?」と思いました。wordpress seo by yoastは停止させたけどなぁ。
何で同じバナーが右側に表示されているんだろう。 😕
そして、気づきました。。。同じ作者やん。

google analytics for wordpress
google analytics for wordpress

WordPress SEO by Yoast とは少し違い、バナーはひとつだけのようです。
 プラグインの評価をつけてね。ユーザーフォーラムはこっちだよ。といった一般的な情報だけですね。

 

3. Google XML Sitemaps

google xml sitemaps
google xml sitemaps

機能の提案、通知一覧、公式FAQなど、プラグインについての改善や提案などの情報が充実していると感じました。
ところどころ、日本語訳がされていないのがちょっと残念です。

やっぱりこう見ると、使用するユーザーの言語で使用できるというのは、何の機能の設定なのかが分かるので安心しますね。

 

4.All in One SEO Pack

all in one seo pack
all in one seo pack

設定の前に、プラグインに関する情報や寄付の案内、何かの割引サービス的な表示をしています。
設定の前にプラグインの情報を掲載。するという点が微妙な所ですね。
今回の All in One SEO Pack については、特に邪魔には感じませんでした。

これぐらいシンプルなら、大丈夫なのかも。

 

5.Ultimate TinyMCE

インストールして有効化すると、ちょっとびっくり。

Ultimate TinyMCE activate
Ultimate TinyMCE activate

プラグインの一覧だけでも、かなり目立!
へぇ~こんな方法もあるのか。
これはいい参考になりそうです。あまり派手にし過ぎると良くないですが。

プラグイン設定ページにいくと…。

Ultimate TinyMCE
Ultimate TinyMCE

ひとこと。「なんて緑だ!」
(分からない人は バイキング で調べてね)

これだけ色が主張していると、目がいきますね。それと、私は次の表示を「ユーモア」ととらえました。

Ultimate TinyMCE donate
Ultimate TinyMCE donate

人間味が溢れている 😆

でも実際、私もそうですがプラグイン開発者もひとりの人間です。そりゃ日曜日もありますよね。

 

Ultimate TinyMCEの開発者は、息子がいないのか?そう考えてしまいました。
そっちじゃないか。でも寄付の目的等を書くことは良いことかもしれません

また、

Ultimate TinyMCE settingpage
Ultimate TinyMCE settingpage

PROバージョンを購入するとこの機能が使えるようになりますよ。
という事が一目見て分かるよう作られていました。これはいいですね。
よく、「PROバージョンはこちら」とはありますが、PROバージョンとの比較をする為にわざわざそのサイトに訪問しないといけないので、少し手間が入ります。

プラグインの設定画面ですぐにその比較ができると、手間が減っていいかもしれませんね。

具体的な必要性を感じさせてから、開発者のサイトに訪問させる。

大事な事かもしれません。

 

6.WooCommerce – excelling eCommerce

インストール…そして有効化…そしてその後…。

WooCommerce notice
WooCommerce notice

「販売を開始する準備ができました」

はい、分かりました。分かりましたが、、関係のないページにも案内を出すのは…。
個人的にはちょっと辞めて欲しい点だと思いました  😕

でもそれ以外はいたってシンプル。

woocommerce setting
woocommerce setting

プラグイン作者サイトへの案内は、この水色で囲ったところだけでした。
Ultimate TinyMCEを見た後にこのプラグインの設定画面を見て思うことが。

もう少し色々と案内を記載してもいいのでは?と感じましたね。

 

 7.BackWPup

BackWpup setting
BackWpup setting

設定画面は設定だけ。
それとは別に上のスクリーンショットの「About」というページがあり、このプラグインについての説明を詳しく記載しているようです。

また、プラグインの販売サイトでよくやっている、無料版と有料版との比較。
これをプラグインのAboutページで説明するという手法もいいですね。

ページとして独立させれば、そんなに邪魔に感じないかも。

BackWpup comparison
BackWpup comparison

BackWpupのなかでも、これはとても気に入りました。

BackWpup dashboard
BackWpup dashboard

何が?って思いますよね。これです。これ。

BackWpup footer
BackWpup footer

フッターにさりげなくプラグイン作者の情報が載っているところ。
他の固定ページや、投稿にいってもこの表記はちょっと…と思いますが、プラグイン設定ページのフッターのみ、このようなフッターとなっています。

これはいいですね。あまり目立たないかもしれませんが、こういう小さな積み重ね、大事だと思います。

 

8.Contact Form 7

とてもシンプル。

Contact form 7
Contact form 7

使い方やFAQなど、少ない表記でリンクをつけて上に位置させる。
これは分かりやすいですね。でも、シンプルだからこそ分かりやすいはず。

 

9.Wordfence Security

個人的には良くなかった例です。Wordfence Security をインストールしてみましたが。。

Wordfence security
Wordfence security

とにかく、テキストが多い、、かつ、翻訳されていないので何が書いてあるのかよく分からない。。 😕

そして、この画面。

Wordfence security blocking
Wordfence security blocking

うっすらと、背景のように見える設定画面。見えますか?
その前面に英文でこう書かれています。(簡単に訳しています)

有料会員のみ、この機能へアクセスができます(使えます)。有料版はこちら

うーん、なんでしょう。なんか、、妙に嫌気がさしました。

 

10.SEO Friendly Images

ここまで記事書くのも結構疲れました。。そんなことはさておき、本題。

さっそくインストールしてみました。

SEO Friendly Image
SEO Friendly Image

とてもシンプル。シンプルなので、バナーのほうにまずは目がいきました。
なかでも、「Useful plugins」(便利なプラグイン集的な)はいいなと感じました。

wordpressのカスタマイズをなんでもいいからしようとするとき、その希望の動作のプラグインが、まず存在しているのか、いないのか。

分からないですよね。
なのでそのようなプラグインがないかどうか、ネットや書籍で色々な方法で探し始めるはずです。

この、Useful plugins に偶然その希望の動作のプラグインがあれば、ダウンロードして試すだろうなと思いました。そこまでダウンロードされる可能性は高くはないと思いますが、小さな積み重ねは必要だと思います。
ただ、もう少し説明を加えたらもっとよくなるはず。

プラグイン名

このプラグインはこういう時に便利なプラグイン。こういう事ができます。

 

みたいな。

 

 

以上10プラグインの画面構成・レイアウトの例でした。
個人的にはどれもこれも、参考になりました。
アクセスを呼びたいなら、目立つ事は大切です。ですが…。
似たような機能のプラグインがあったら、人は使いやすいほうを自然と選ぶだろうと思います。

適度に目立たせてサイトへの訪問率を上げてみたいと思います。

上がらなかったら…誰か教えてください 😳

 

でもそのまえに。

レイアウト変更の為にプラグインを更新してもしょうがない。
何か機能の更新やバグがあったときに、一緒にレイアウトは変更しよう。

なので、今すぐの対応予定はないですね。

wordpress 3.6 リリース辺りが今のところの目途ですね。

 

– 2013年4月9日追記 –

レイアウト変更を、3.6がリリースされるよりも前にすることにしました。
そのほうが、3.6に対応するバグ修正はしやすいと思いましたので。

その後のレイアウト変更後はこちらです。

プラグイン設定画面の画面構成及びレイアウトを考えてみる-その後

 

wordpress plugin WP Admin UI Customize version up 1.2

wordpressの管理画面のカスタマイズができる

WP Admin UI Customize

のバージョンアップをおこないました。
最新バージョンは1.2。

 

やったこと

新規投稿、投稿編集画面にて、パーマリンクがデフォルトの設定の時、
「パーマリンクの変更」のリンクが表示されるのですが、このリンクを非表示にする項目を追加しました。

パーマリンク変更リンクボタン
パーマリンク変更リンクボタン

それと、「外観」→「メニュー」にて、メニューを新規で作成したり、作成済みのメニューが削除できるようになっていますが、このリンクを非表示にする項目を追加しました。

外観メニュー設定
外観メニュー設定

そもそもこんな機能使うの?っていう方もいると思います。

私の場合、先にメニューを作成し、クライアントにCMSとして納品。
その場合、“作成したメニュー内”に固定ページやカテゴリページのリンクを設置して欲しのですが、クライアントさんがメニューを作成して、「表示されないけど?」みたいな事がありましたので、このような項目を追加しました。

作成済みのメニューだけで、サイトを運営したい時には便利だと思います。

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/wp-admin-ui-customize/

 

もしくは、管理画面のプラグインから、「WP Admin UI Customize」と検索して、インストールしてください。

クライアントに納品するWordPressの管理画面カスタマイズ vol.5

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.4 にて、ログイン画面のカスタマイズをおこない、ほぼカスタマイズ完了と言える状態となりました。

  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

 

クライアントさんが管理画面にログインした際に、今の契約内容は一目で分かるほうがいいですよね。

各レンタルサーバがやっているようなイメージ。

ロリポップの契約内容画面
ロリポップの契約内容画面

こういった契約状況や、制作会社からクライアントへのお知らせ等を、管理画面内のダッシュボードに表示させたいと思います。

 

プラグイン Announce from the Dashboard をまずはインストール

announce from the dashboard インストール
announce from the dashboard インストール

Announce from the Dashboard をインストールし、有効化すると、サイドメニューの「設定」の中にメニューが作られます。
日本語の環境だと、「ダッシュボードお知らせ」というメニューです。

メニュー表示
メニュー表示

Announce from the dashboardの設定画面に移ると、ダッシュボードに表示したい内容、権限、お知らせの種類を選択できるので、それぞれ入力・選択していきます。
  (ここは例として、ロリポップの契約期間の真似をしています。)  

ダッシュボードへのお知らせ作成例
ダッシュボードへのお知らせ作成例

 

こんな感じですね。これで保存します。
これで、指定した権限のユーザー(ここではクライアント)に現在の契約内容が表示されるようになります。

お知らせ設定後
お知らせ設定後

注意を引く赤枠で囲ったり、通常のメタボックスのような表示もできます。

また、いくつでもお知らせを作ることができるので、契約内容とは別のお知らせをつけることもできます。

 

次は クライアントに納品するwordpressの管理画面カスタマイズ vol.6 にて、投稿画面のカスタマイズとなります。

 

Custom Options Plus Post In バージョンアップ

このたび、CUSTOM OPTIONS PLUS POST IN のバージョンアップをおこないました。

最新バージョンは、1.2となります。
主にデータベース周りの格納方法の更新を行いました。

 

一度シリアライズしたデータを格納、取り出す際はシリアライズし、
ひとつのデータを取り出す形式について、おそらく処理を指摘されていたので変更しました。

 

今まで

wp_options 内に、キー coppi として格納

coppi1.2以前の格納方法
coppi1.2以前の格納方法

 

現在

テーブルを用意した格納方法

 

coppiテーブル
coppiテーブル
データ格納サンプル
データ格納サンプル

update_option 及び get_optionを使わずに、テーブルを用意するので、そもそも、

どうやってやるんだろう。。と色々思考錯誤しましたが、下記の記事に感謝です。

 

Creating_Tables_with_Plugins

http://codex.wordpress.org/Creating_Tables_with_Plugins

■ WordPressでデータベースを使ったプラグインを作成する

http://takahashifumiki.com/web/programing/1440/

 

テーブルを用意することでのメリットは、まずは ソート がかなり楽になりました。
今まではget_option全データをとにかく取得し、指定されたソートの順序になるようarray_multisortを行っていたのですが、sqlクエリとして投げるだけなので、返ってきたデータがソート済み。

次に、一つのデータを取り出すのも楽になりました。

 

プラグインが有効化された際に、テーブルを作成し、元のデータを取得しそこに複製された時は、
おぉーってなりましたねw

 

ただ、sqlクエリを直接書くことになるので、脆弱性が気になります。
(sqlに限った事じゃないですが)

試していて、よく分からなかった 「$wpdb->prepare」。

wordpress 3.4.2 のバージョンでテスト動作を繰り替えし、動作確認をして、
いざ wordpress 3.5 で動作をすると、

Warning: Missing argument 2 for wpdb::prepare()

が連発。んん??どういうエラーなんだろうと色々とぐぐってみました。

$wpdb->prepare() 自体の動作は、SQL インジェクション攻撃からクエリを保護する によると、
クエリを保護するためにエスケープするためのもの。らしいのですが、こんな記事もありました。

Warning: Missing argument 2 for wpdb::prepare()は危険!

正しい使い方をしないと、危ないよ。という事らしいです。

3.4ではエラーも出ないのか。。そもそも使い方を間違っていたと。

この記事の下のほうまで読んでいくと、akismetプラグインの場合の記述リンクがあったので見てみると、

 $remaining = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM $wpdb->commentmeta WHERE meta_key = 'akismet_error'" ) );

$remaining = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->commentmeta WHERE meta_key = 'akismet_error'" );

こうなっていました。

$wpdb->prepare を外したんですね。

今回はakismetプラグインを参考にして、$wpdb->prepare を外すと動作OK。3.4.2で試しもてもOK。

とりあえず、今回はこれでよしとして、アップデートしました。

 

こういう面を色々と考えると、難しいです。
出来る限り、使えるテーブルは使ったほうが、ありがたい。のかも。

 

ダウンロードはこちら http://wordpress.org/extend/plugins/custom-options-plus-post-in/