月: 2013年5月

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

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

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

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

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

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

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

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

     

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

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

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

     

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

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

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

  • 英語のサイトは難しすぎ…。

    先日、WP Admin UI Customizeプラグインの専用サイトを作り、公開しました。

    そのサイト内では、このプラグインを使って出来る機能を、画面のキャプチャを主に使って説明しています。

    これだけでも少し疲れましたが…

    英語のサイトってこんなにも難しいなんて。。

    しかも英語が合っている気がしない。

    そこは気にしない。(ことに…)

    いまだに to、for、の違いがよく分からない。。

     

    しかし、みなさん多言語サイト作る時ってどうやって作っているんでしょうか。

    私の場合は、Wordpressのマルチサイト機能を利用して、

    • 親サイト(英語)
    • 子サイト(日本語)

    という風にし、あとはGoogle Transrate バーを設置して好みの翻訳してねという感じにしました。

    (翻訳のプラグインは様々ありますが、私は普段、外人からのサポートフォーラムへの返事で、GoogleとWeblio両方の機械翻訳をなんとか駆使して返事しているのですが、最近は機械翻訳の結果のままで返事を出す事はまずなくなりました。なので、機械翻訳プラグインは使わない事にしました。
    この辺は好みかな。)

     

    こちらも参考に。

    WordPress で多言語サイトを作成する

     

    マルチサイトって大変ですね。 😯

    後々考えたら、通常サイトで英語投稿ページ専用ユーザーと日本語投稿ページ専用ユーザーの2種類作ってそれぞれの言語ページを投稿していけばいいんじゃないかとも思いました。

    結局は、2種類の言語の記事を作る為に、どの方法が作りやすく運用しやすいかってトコですね。

     

    ついでに、マルチサイトアドオンを販売しているので、Paypalのデジタルチェックアウトを使用していますが。

    かなり難しかったです。ただ、料金を決めてチェックアウトボタンを設置、という場合なら簡単かもしれませんが、購入者に使用するサイトのドメイン・パスを入力させる画面を設ける必要があり、この入力画面をどの段階で入力させるべきか、どの段階なら入力させることができるのか

    最近その疲れがやっと、取れた感じ。

     

    ぼちぼちこのブログも更新していきます。

    コメントからプラグインへの要望もありましたので、検討していこうかな。