wordpress plugin Screen Options and Help Show Customize Version up 1.2.3

wordpress管理画面の右上にある「表示オプション」と「ヘルプ」のボタン表示を変更するプラグイン、

Screen Options and Help Show Customize

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

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

 

やったこと

寄付メッセージを削除できるよう設定を追加しました。

それと、今まで一列表示で設定できるようにしていたのですが、二列表示になるよう変更しました。

少しだけ使いやすさがあがったんじゃないかな。と思います。

Screen Options and Help Show Customize 設定画面
Screen Options and Help Show Customize 設定画面

 

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

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 plugin Archive Posts Sort Customize release.

カテゴリページでの記事位置、タグページでの記事一覧は通常、

  • 日付順
  • 降順
  • 投稿記事数は管理画面にて設定した、設定記事数

に応じた内容が表示されます。

このデフォルトの記事の表示順序を自由に変更できるプラグインを作りました。

×query_posts() ○pre_get_posts() 仕様。
管理画面の記事一覧には適用されません。

 

インストール方法

プラグインインストール画面の検索に、「Archive Posts Sort Customize」と記入して検索してインストールしてください。

プラグインインストール画面
プラグインインストール画面
プラグイン検索結果
プラグイン検索結果

まだ誰からも評価をいただいていないので、★がありません。。星が無いって、なかなか怪しくて使う気になれない気がするのは、私だけかな。。

 

インストールしたら

管理画面メニュー
管理画面メニュー

管理画面の設定の下のところに、「カテゴリー記事一覧ソートカスタマイズ」というメニューが出るので、そこから記事一覧のソート順を設定していきます。

archive_posts_sort_customize画面
archive_posts_sort_customize画面

これが設定画面になります。設定する項目は基本は3つ。
「投稿の表示数」、「投稿のソートする対象」、「ソートの順序」です。

降順や昇順について、自分でもたまに忘れたりする事があります。

新しい記事から古い記事へのソート、どっちだっけ??

そういう細かい表記があると、特に初心者には使いやすいと思い表記しています。

 

カスタムフィールド名でのソートについて

ソート対象の設定
ソート対象の設定

カスタムフィールドの値をもとに、記事一覧をソートすることもできます。
背景がうっすらとなっている部分がありますが、ソートの対象からカスタムフィールドを選ぶと、ソート対象にしたいカスタムフィールド名を入力することができるようになっています。

特に。カスタムフィールド名が分からない方もいるとおもったので、
「カスタムフィールド名が分からない場合はこちらを~」のリンクを付けて、そのリンクをクリックすると、
記事で使用している全カスタムフィールドのキーの一覧が下に表示される仕様にしています。

screenshot-3
screenshot-3

「custom_field1」、「custom_field2」の2つが、実際に記事編集画面から作成したカスタムフィールドになります。

このカスタムフィールド名をクリックすると、上のカスタムフィールド名を入力する所に自動で挿入される、ちょっとだけあると嬉しい仕様?にしています。

ちなみに今のところは、カテゴリページの記事一覧、タグページの記事一覧の2種類のみにしています。
※バグがあれば、修正をおこなってから年月ベースのアーカイブも追加する予定です。

 

ダウンロードされるかたはこちらからどうぞ。

http://wordpress.org/extend/plugins/archive-posts-sort-customize/

久しぶりのプラグイン追加

いやー、久しぶりにwordpress.orgのプラグインディレクトリに追加しようと思ったら、
何をどうしたらよいのか忘れていました。

なんとか思い出しながら、追加の申請は完了。

あとは申請の結果待ち。

ちなみに、今日の記事でやっていた、記事一覧系のプラグインとなります。

「Archive Posts Sort Customize」

カテゴリページでの記事一覧、タグページでの記事一覧(ともにフロントでの表示)のソートカスタマイズを目的としたプラグインです。

カスタムフィールドを入力する部分なんかは、個人的にいい部分だと思っています。

(カスタムフィールド名が分からない人は、カスタムフィールド一覧からクリックして選ぶだけ仕様)

 

明日には、多分申請結果が届くかな。

しかし、、プラグインのネーミングが難しい。。
使うと想定されるユーザーが、どういったキーワードで検索するだろう。。。

pre_get_posts なるものがあったなんて。。

カテゴリ一覧等のアーカイブのページでは、ほとんどquery_posts()を使ってソート順や記事の取得をおこなっていました。

wordpressの日本語サポートフォーラムでもそれで返事をしていました。
記事一覧の時のソートができません

そんななか、サポートフォーラムをちょくちょく見ていると、query_postsよりpre_get_postsのほうがいいよ。
という記載があったり。

そんな関数があるの?pre_get_posts()という関数の存在が分かりませんでした。

そこでちょっと調べてみました。

http://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts

英語だらけ。難しい。。

http://wpdocs.sourceforge.jp/テンプレートタグ/query_posts

ここはquery_postsの説明(日本語)です。

functions.phpでpre_get_postsを使って同じことをするなら、このように書けます。
function five_posts_on_homepage( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$query->set( ‘posts_per_page’, ‘5’ );
}
}
add_action( ‘pre_get_posts’, ‘five_posts_on_homepage’ );

いつからでしょうか、こんな表記が。前からこんな表記あったっけな。。

と、ここで日本語のドキュメントを発見。

http://wpdocs.sourceforge.jp/プラグイン_API/アクションフック一覧/pre_get_posts

使い方は、条件分岐等をおこなって、

$query->set();

で取得したい記事の種類や順序、数を決める感じかな。
->set()はcakephpみたいでこっちのほうが感覚的にやりやすそう。

念の為、コアファイルのset()に当たる部分を確認してみることに。

おそらく、wp-include/query.phpの1900行目辺りの、

function set($query_var, $value) {
  $this->query_vars[$query_var] = $value;
}

が$query->set()の部分だと思います。

$query->set( ‘posts_per_page’, ‘5’ );
こういう指定だと、
$this->query_vars[“posts_per_page”] = 5;
こういう風になるって事かな。

query_posts() は

function query_posts($query) {
 $GLOBALS['wp_query'] = new WP_Query();
 return $GLOBALS['wp_query']->query($query);
}

うーん、クラス WP_Query のfunction query()を実行して突っ込んだ値を返す。かな。

http://wpdocs.sourceforge.jp/関数リファレンス/WP_Query
を読んだほうがいいかな。

うん、読んでもよく分からない :mrgreen:

私の場合は実行して確かめたほうが早いかな。

あの時のフォーラムの質問者の方と同じ環境にする為にまずは

  1. 記事を5個ぐらい追加。
  2. 記事への評価とアクセス数を取得する為に、WP-PostRatingsとWP-PostViews をインストール。

と、こんな感じ。

記事一覧
記事一覧

あ、評価やアクセス数でソートしなきゃいけないから、評価も適当につけないといけないか。
カテゴリも適当に1つ作らないと。公開日も適当にばらばらにしないと。

なので、こうなるかな。

記事一覧2
記事一覧2

この状態で「未分類」のカテゴリ一覧の$wp_queryを確認してみます。

WP_Query Object
(
    [query] => Array
        (
            [cat] => 1
        )

    [query_vars] => Array
        (
            [cat] => 1
            [category_name] => %e6%9c%aa%e5%88%86%e9%a1%9e
            [category__in] => Array
                (
                    [0] => 1
                )

            [posts_per_page] => 10
            [nopaging] => 
            [order] => DESC
        )
...

デフォルトのクエリですね。

ここで、query_posts()にて、記事のソートを評価の高い順でソートしてみます。

WP_Query Object
(
    [query] => Array
        (
            [cat] => 1
            [nopaging] => 1
            [orderby] => meta_value_num
            [meta_key] => ratings_average
        )

    [query_vars] => Array
        (
            [cat] => 1
            [nopaging] => 1
            [orderby] => meta_value_num
            [meta_key] => ratings_average
            [category_name] => %e6%9c%aa%e5%88%86%e9%a1%9e
            [category__in] => Array
                (
                    [0] => 1
                )
            [posts_per_page] => 10
            [order] => DESC
        )

WP_Query Object->query部分に指定したクエリが入りましたが、結局query_varsにも入るようになっているんですね。

次は、pre_get_posts。コードはこれ。

function add_fil_pre_get_posts( $query ) {
 if ( $query->is_category && $query->is_main_query() ) {
 $query->set( 'nopaging', 1 );
 $query->set( 'orderby', 'meta_value_num' );
 $query->set( 'meta_key', 'ratings_average' );
 }
}
add_action( 'pre_get_posts', 'add_fil_pre_get_posts' );

結果は、

WP_Query Object
(
    [query] => Array
        (
            [cat] => 1
        )

    [query_vars] => Array
        (
            [cat] => 1
            [error] => 
            [category_name] => %e6%9c%aa%e5%88%86%e9%a1%9e
            [meta_key] => ratings_average
            [category__in] => Array
                (
                    [0] => 1
                )
            [nopaging] => 1
            [orderby] => meta_value_num
            [posts_per_page] => 10
            [order] => DESC
        )

WP_Query Object->queryには一切値は入りません。query_varsだけに値がセットされました。
query_posts、pre_get_postsともに、見た目は同じように評価順の記事のソートになりました。

 

queryって意味ないの?なんなの?
ということで、queryに関するところを調べていたら、get_posts()関数にquery_varsに関することがありました。

function get_posts() {
 global $wpdb, $user_ID, $_wp_using_ext_object_cache;

$this->parse_query();
do_action_ref_array('pre_get_posts', array(&$this));

// Shorthand.
$q = &$this->query_vars;

// Fill again in case pre_get_posts unset some vars.
$q = $this->fill_query_vars($q);

// Parse meta query
$this->meta_query = new WP_Meta_Query();
$this->meta_query->parse_query_vars( $q );

$qは最終的にsql文に追加される配列部分。これって、query_varsをもとにデータを取得していますよね。(違うかな?)

そうだとすると、pre_get_posts()フックで記事のソートが出来る事が理解は出来ますが。

余計にqueryの意味が分からなくなってきた 😕
何の為にあるの?もうちょっと探ってみましたが。

さっぱり分からず。

$this->queryを使って何か処理をしているところを探してみましたが、さっぱり。

これ以上はよく分かりません。今日はこの辺で終わりにしよう。

 

でも、とりあえずpre_get_posts()で目的の記事一覧が取得できる事は理解できました。
今後はこれを使っていこうかな。

そういえば、これは注意。

http://wpdocs.sourceforge.jp/プラグイン_API/アクションフック一覧/pre_get_posts

このページの、メモ、の3番目。

このフィルターは管理画面のクエリーにも影響を与えます。

えー。対処法はis_admin()とかでなんとかなると思うけど、もっと大きく書いて欲しい。

 

——————————–

よく考えたら、アーカイブの記事一覧の順序を自由に変更するプラグインってないのかな?

無ければ作ろうかな。

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

前回、プラグイン設定画面の画面構成及びレイアウトを考えてみるという記事で、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 Post Lists View Custom version up 1.4

管理画面の記事一覧、メディア一覧など様々な一覧画面のカスタマイズができる

Post Lists View Custom

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

 

やったこと

コメント一覧のカスタマイズができるようになりました。
これでほぼ全ての一覧表示のカスタマイズが可能です。

コメント一覧表示設定カスタマイズ例
コメント一覧表示設定カスタマイズ例

ダウンロードはこちら

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

 

もしくは、管理画面のプラグインから、「Post Lists View Custom」と検索して、インストールしてください。