WordPress管理画面 カスタム投稿の記事一覧画面で絞り込み検索を追加する

システム部の鈴木です。

先日、WordPressでファイルアップロードの機能におけるセキュリティホールの対策を行った最新版
4.5.2 がリリースされました。

弊社では沢山のサイトを管理させていただいておりますが、WordPressを導入しているサイトも多く
今回のような緊急性の高いセキュリティアップデートのときは一苦労です。

そんなWordPressについての小ネタです。

 カスタム投稿(Custom Post Type)

ブログというよりもCMSとしてWPを使う場合は、通常の投稿メニューでは無く
用途ごとにメニューを設けてそれぞれに適した入力項目を持った管理画面を作ったり、という事がよくあります。

そういった独自のメニューを作るときには「カスタム投稿(Custom Post Type)」という機能を使います。

 カスタム分類(Custom Taxonomy)

通常の投稿メニューとは別にカスタム投稿でメニューを作成したら、
その中でもカテゴリを設けたくなる場合があります。

それを実現するのが「カスタム分類(Custom Taxnomy)」というものです。

 

これらは Custom Post Type UI などのプラグインを使えばどちらも簡単に管理画面からの設定だけで作ることができます。

 

以上を踏まえて今回の本題です。

投稿一覧の画面には以下のようなカテゴリで絞り込むメニューがあると思います

20160527

カスタム投稿の一覧ページだと、カスタム分類を設定しても出てこないんですよね。
でも、検索があれば非常に便利。

ということで調べたところ、以下のようなコードが散見されました。

 

<br />
function add_post_taxonomy_restrict_filter()<br />
{<br />
    global $post_type;<br />
    if (&#8216;music&#8217; == $post_type) {<br />
        $menu = &lt;&lt;&lt;EOH<br />
          &lt;select name=&quot;genre&quot;&gt;<br />
            &lt;option value=&quot;&quot;&gt;カテゴリー指定なし&lt;/option&gt;<br />
EOH;<br />
            $terms = get_terms(&#8216;genre&#8217;);<br />
            foreach ($terms as $term) { ?&gt;<br />
                $menu .= &#8216;&lt;option value=&quot;&#8217; . $term-&gt;slug . &#8216;&quot;&gt;&#8217; . $term-&gt;name . &#8216;&lt;/option&gt;';<br />
            }<br />
        $menu .= &#8216;&lt;/select&gt;';</p>
<p>        echo $menu;<br />
    }<br />
}<br />
add_action(&#8216;restrict_manage_posts&#8217;, &#8216;add_post_taxonomy_restrict_filter&#8217;);<br />

これを使用しているテーマの function.php に書きましょう、というもの。
この例だと “music” というカスタム投稿で “genre” というカスタムタクソノミーから絞り込みを行う、というものです。
<select>のname属性には絞り込みに使うカスタムタクソノミーを指定するとの事です。

 

しかしこれ、どうもWordPressの4.4.1くらいからはうまく動かないみたいです。
メニューは出てきますがどうも上手く絞り込みがされません。

そこで訂正したものがこちらです。

<br />
function add_post_taxonomy_restrict_filter()<br />
{<br />
    global $post_type;<br />
    if (&#8216;music&#8217; == $post_type) {<br />
        echo &#8216;&lt;input type=&quot;hidden&quot; name=&quot;taxonomy&quot; value=&quot;music&quot;&gt;';<br />
        echo &#8216;&lt;select name=&quot;term&quot;&gt;';<br />
        echo &#8216;  &lt;option value=&quot;&quot;&gt;カテゴリー指定なし&lt;/option&gt;';</p>
<p>        $terms = get_terms(&#8216;music&#8217;);<br />
        foreach ($terms as $term) {<br />
            echo &#8216;&lt;option value=&quot;&#8217; . $term-&gt;slug . &#8216;&quot;&gt;&#8217; . $term-&gt;name . &#8216;&lt;/option&gt;';<br />
        }<br />
        echo &#8216;&lt;/select&gt;';<br />
    }<br />
}<br />
add_action(&#8216;restrict_manage_posts&#8217;, &#8216;add_post_taxonomy_restrict_filter&#8217;);</p>
<p>

変更のポイントは主に2つ

  • カスタム分類名は hidden で渡す
  • <select>のname属性は 検索対象とするキー、つまり “term” を指定する

この修正で上手く行きました。

 

 カスタム投稿、カスタム分類は非常によく使う機能なので、今後は本体で是非サポートしてほしいですね。

それまではこの方法をお試しください。

【Mac】 Dash で開発の作業効率アップ!

作業効率をあげたい!

開発作業のスピードアップは常に課題の1つですよね。

当然、サイトは一つ一つ違うニーズがあり、違う問題を解決していく作業ですが、

やはり違うサイトといえど同じような記述を書く必要がある場面はあるもので、

書きたいと思ったものを瞬時に呼び出すことができるスニペットアプリは多いに役に立ちます。

Dash


Dashのロゴ

Dash


スニペットアプリは複数利用していますが、開発でオススメなのは「Dash」!

「登録した文字列を素早く呼び出すスニペット機能」

「言語の関数を素早く検索して調べる」

の2つを兼ね備えたソフトウェア Dash はかなり便利なのでご紹介です。


Dash は App Store からダウンロードできます。

基本機能は無料のままで利用可


https://itunes.apple.com/jp/app/dash-3-api-docs-snippets./id449589707?mt=12

すべてのアプリケーションを対象にできる

Dash を使うメリットは

  1. いつどんな場面でもショートカット1つですぐに呼び出せる
  2. どんなソフトウェアに対してもテキストの貼り付けしてくれる

です。

なので、テキストエディターが何であろうと同じように機能してくれます。

私の場合は、プログラミングに限らず個人的によくタイプすることの多いもの、

例えばメールのテンプレ文章やら、

自社の住所や、電話番号、メールアドレスなども登録しています。

具体的に私の登録しているスニペットでの操作例を書きますと、

「address # medical」と入力すると、その文字が瞬時に

「東京都港区赤坂二丁目23-1 アークヒルズフロントタワーRoP 902号」と弊社メディカルデザインの住所に変換されるようにしています。

この便利なところは、
わざわざ Dash を呼び出して操作を行うわけではなく、

Dash が起動していれば、「address # medical」とタイプするだけ、
というところです。

また、その登録しているスニペットを「タグ付け」しておけるので、

Dash の画面から「php」やら「css」「javascript」など、言語ごとに整理できるのもとても便利です。

多言語のドキュメントを検索

Dash は スニペット機能だけでなく、複数言語ドキュメントの検索を一括でおこなえる機能も兼ね備えています。

自分が使う言語のドキュメントをローカルにダウンロードでき、

それらを対象に、ドキュメント内を文字列検索してくれるので、

うろ覚えの関数のドキュメントを高速に参照することができるのがありがたいです。

私は、テキストエディターは SublimeText がメインですが、


「文字を選択してショートカット一発で、その選択文字の Dash 検索結果を一発で呼び出す」プラグインが、とんでもなく便利なのです。

うろ覚えのあの関数の、ああ、こいつの引数はどういう順番だったけ、など、

それらをいかに早く呼び出して正確に書けるか、

作業中何度もやる短いアクションをいかに素早くできるかはけっこう大きいと思います。

Dash をご存じなかった Mac ユーザーのかたはぜひお試しを!

【WordPress】テキストエディタのクイックタグをカスタマイズする。

システム部のヒライです。

WordPressを利用されている皆様、記事投稿の際にテキストエディタとビジュアルエディタ、どちらをお使いでしょうか?

慣れている方はテキストエディタを利用されているのかなと漠然とイメージしておりますが、

本記事はエディタに備わっているクイックタグの種類を増やして便利にしちゃおうという趣旨となります。

クイックタグとは

クイックタグはテキストエディタ上部に配置されているボタンです。

クリックすることで対応したhtmlタグが挿入されます。

テキストエディタ1

複数名で記事投稿をしている場合でも、似たようなhtmlタグ構成(記事の構成)に出来ますし、

htmlに慣れていない方でもボタンをポチっとするだけで淡々とhtmlタグを使える代物です。

自前のクイックタグを追加する

せっかくなのでhtmlの要素にclassを付けたタグを表示したいと思います。
まずはWordPress上で使っているcssファイル(style.css等)にスタイルを書き込みます。

<br />
/*太字*/<br />
.area_gray{<br />
  background: #eeeeee;<br />
}</p>
<p>/*赤色*/<br />
.red{<br />
  color: #ff0000;<br />
}<br />

次に、functions.phpに以下を記入します。

<br />
&lt;?php<br />
function addMyQuicktags(){<br />
?&gt;<br />
	&lt;script type=&quot;text/javascript&quot;&gt;<br />
		QTags.addButton(&#8216;back_gray&#8217;,&#8217;背景(グレー)&#8217;,'&lt;div class=&quot;area_gray&quot;&gt;&#8217;,'&lt;/div&gt;&#8217;);<br />
		QTags.addButton(&#8216;text_red&#8217;,&#8217;文字色(赤)&#8217;,'&lt;span class=&quot;text_red&quot;&gt;&#8217;,'&lt;/span&gt;&#8217;);<br />
	&lt;/script&gt;<br />
&lt;?php<br />
}<br />
add_action(&#8216;admin_print_footer_scripts&#8217;,&#8217;addMyQuicktags&#8217;);<br />
?&gt;<br />

QTags.addButton()内にいろいろと引数を設定するのですが、大切なのは以下です。

<br />
// 左から順に任意のID、ラベル(表示される名前)、開始タグ、終了タグ<br />
QTags.addButton(&#8216;back_gray&#8217;,&#8217;背景(グレー)&#8217;,'&lt;div class=&quot;area_bray&quot;&gt;&#8217;,'&lt;/div&gt;&#8217;);<br />

※他の引数も設定すると表示順を変更したりも出来ます。

※詳細→クイックタグAPI

これだけ設定しておけばOKなので、保存して投稿画面を表示してみましょう。

投稿画面を表示してみる。

テキストエディタ2

追加されたクイックタグとポチポチしてみます。

テキストエディタ3

設定したタグがバッチリ表示されていますね。これで完了です。

これで記事投稿をすれば、最初に設定したcssの通りに表示がなされるという寸法です。

この様によく使うhtmlタグや、場合によっては文字列等をクイックタグ化しておけば、

記事投稿をよりスムーズに行うことが出来るのではないでしょうか。