カテゴリー: カスタマイズ

投稿のカテゴリー選択をラジオボタンにする

WordPressで新規投稿する際に、記事のカテゴリーを決めて選択するようにしていることがよくあると思います。5330のブログでもWordpress、プラグイン、テーマ、カスタマイズ、の４つを定義して、記事を整理しています。

投稿を整理するのに大事なカテゴリーですが、一つの投稿に複数のカテゴリーが付けられるので、散らかることもよく起ります。（カテゴリーやタグを付けすぎて、何がなんだかというブログもたまに見かけますね。）整理整頓好きな方だと、一つの記事に一つのカテゴリーで十分と考える方もいるでしょう。そういう場合、カテゴリーの選択を複数選択が可能な「チェックボックス（四角いやつです）」ではなく、一つしか選択できないラジオボタン（丸いやつです）にしたいかもしれません。WordPressの使い方をよく知っている人なら良いですが、お客さんに納品する場合など、入力方法を用途にあわせて制限してあげた方が親切ですし、利用の際に間違いも起りにくくなります。

カテゴリー選択をラジオボタンに変更するコードを紹介します。ちなみにこの記事の元ネタはこちらです：

[resolved] Help create a simple admin plugin

if(strstr($_SERVER['REQUEST_URI'], 'wp-admin/post.php')) {
    ob_start('one_category_only');
}
if(strstr($_SERVER['REQUEST_URI'], 'wp-admin/post-new.php')) {
    ob_start('one_category_only');
}
function one_category_only($content) {
    $content = str_replace('type="checkbox" name="post_category', 'type="radio" name="post_category', $content);
    return $content;
}

リンク先のコードだけだと、編集だけで新規作成の時にラジオボタンにならないので、post-new.phpを追加しました。変更箇所はそれだけです！リンク先にあるようにプラグインにしてもいいですし、functions.phpに書き込んでも同じように動きます。お試しください。

ページに投稿を表示するショートコード

WordPressをコンテンツ管理システムとして使う場合、サイトトップはブログのように投稿（ポスト）を時系列で表示するのではなく、奇麗にデザインされた固定ページを用意し、投稿は一部だけを（例えば新着記事５件とか）ページ上にリストで表示するなんてことをよくやります。

WordPressをブログっぽくしたくない時、トップページでループ（投稿のまとまりのこと。WordPressのテーマのテンプレートで投稿を連続表示させるファイルはloop.phpと呼ばれます。）をまるごと表示ではなく、一部だけ表示するようにして、投稿は別の専用ページ上で表示するようにします。こうした作り方をする際、ループを任意のページに簡単に差し込めるショートコードを作っておけば、ページごとにコードが微妙に異なるテンプレートを用意せずとも、このカスタマイズが簡単に実現できます。会員制サイトで著者とカテゴリーで分類すれば、特定の会員のお知らせを表示するページなんかも作れます。ショートコードを使うので、お客さま側で簡単に表示の順番を入れ替えたり、レイアウトを変えたりできます。あと、カスタム投稿タイプを使って専用のお知らせ入力欄を作り、好きな場所に表示するなど、ページの中に色々なコンテンツを一括して掲載することができるようになります。投稿の種類と表示場所が自由に選べるだけでも、できることは色々広がりそうです。

（上の例では、Post UI Tabsプラグインを使って、ページのコンテンツを３つのタブに分類し、その一つ”お知らせ”に著者web5330によって書かれた投稿のループを差し込んでいます。）

いろいろ応用が利くループを表示するショートコードですが、日本語で書かれた作り方の情報がほとんどありません。英語では多少ありますが、情報が多少古いのと、ループ部分の出力の仕方が単純なリスト表示だけだったりしたので、元のコードを改変して、WordPressのloop.phpで出力している形式のものを作ってみました。

ちなみに元のコードはこちらです：

WordPress shortcode: Display the loop

改変版コードはこちらです：

function myLoop($atts, $content = null) {
    extract(shortcode_atts(array(
        "query" => '',
        "category" => '',
        "author_name" => '',
        "posts_per_page" => '',
    ), $atts));
    global $wp_query,$paged,$post;
    $temp_query = $wp_query;
    $temp_paged = $paged;
    $temp_post = $post;

    $wp_query= null;
    $wp_query = new WP_Query();
    if(!empty($category_name)){
        $query .= '&category_name='.$category_name;
    }
    if(!empty($author_name)){
        $query .= '&author_name='.$author_name;
    }
    if(!empty($posts_per_page)){
        $query .= '&posts_per_page='.$posts_per_page;
    }
    if(!empty($query)){
        $query .= $query;
    }
    $wp_query->query($query);
    ob_start();
    ?>

    <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

	    <div class="entry-meta">
	        <?php twentyten_posted_on(); ?>
	    </div><!-- .entry-meta -->

	    <div class="entry-content">
	        <?php the_content(); ?>
	    </div>
	</div>
    <?php endwhile; ?>

    <?php
    $wp_query = null;
    $wp_query = $temp_query;
    $paged = null;
    $paged = $temp_paged;
    $post = null;
    $post = $temp_post;
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}
add_shortcode("loop", "myLoop");

?>

上のコードをfunctions.phpに差し込めば、loopショートコードが使えるようになります。テーマの変更を自由にしたい場合はプラグインにすると良いでしょう。利用できるパラメーターはcategory_name、author_name、posts_per_pageの３つを用意しました。WP_Queryで使えるパラメーターは何でも追加できるので、パラメーターは好きに改変してください。shortcode_attsの配列にパラメーターを追加するだけでOKです。

ショートコード API

WP_Queryの説明は下のリンクを参照してください。リンク先にも説明されているように、使えるパラメーターはquery_postsと同じです。

関数リファレンス/WP Query
テンプレートタグ/query posts

ページにショートコードを差し込む際の記述は以下のとおりです：

[loop category_name="work" author_name="web5330" posts_per_page="5"]

上のショートコードをページの好きな場所に差し込むことで、WordPressの投稿からカテゴリーがwork（仕事）、著者がweb5330（nicenameを使います。ニックネームではないので注意！）、最新の投稿５件をWordPressのデフォルトのループ同様フル記事で表示します。ページ送りもできるはずなので、htmlのアウトプットを変えたいときは、ob_start()からob_get_contents()の間のhtmlを変えれば、好きなhtmlを出力できます。

このショートコードが一個あるだけ、色々できることが広がるので皆さんも試してみてください。

シェア（共有）ボタンを追加する

WordPressで作ったサイトを宣伝する上で、ソーシャル系のサービスが提供しているシェア（共有）ボタンの設置はかかせません。

シェアボタンを提供しているソーシャル系サービスはそれこそ色々ありますが、サイトにボタンをごちゃごちゃ乗せるのも、見た目上よくないですし、使い勝手も悪くなってきます。欲張らずに、日本で人気のあるサービス３つくらいに絞った方が良いでしょう。サービスの追加や入れ替えは、後で簡単にできるので、ここではTwitter、Facebook、はてなブックマークの３つに絞って解説します。

  1. Twitter Retweet（Topsy Retweet Buttonプラグイン）
  2. Twitter Retweet（公式リツイートボタン）
  3. Facebook いいね！（Like!）
  4. 新はてなブックマークボタン

1. Twitter Retweet（Topsy Retweet Buttonプラグイン）

http://wordpress.org/extend/plugins/topsy/

Twitterのリツイートボタンを追加したい場合、いろいろプラグインがあるので、それを使うのが一番お手軽です。なかでもよく使われているのが、Topsy Retweet Button プラグインです。

プラグインをインストールしたら、設定メニューの下に「Topsy」というメニューが追加されるので、そこから設定します。デフォルトの設定のままでも動きますが、リツイートの中に自分のTwitterアカウントを入れたいときは、Retweet Usernameのところに入れておきます。あとはVisual Appearanceでボタンの見た目を決めます。

すると上のようなプレビューが表示されます。設定のButton Placementでブログのどこにボタンを挿入するか指定できますが、大抵、ページの上か下に差し込まれることになるので、細かく差し込み場所を指定したい場合は、PHPの topsy_retweet_big() というコードを使って、single.phpのボタンを表示したい場所に差し込みます。するとWordPressのページ上では、ボタンを表示するためのコードが自動で生成され、ブラウザ上でリツイートボタンとして表示されます。

2. Twitter Retweet（公式リツイートボタン）

Topsyのような外部サービスではなく、Twitterが提供する公式ボタンを使いたい場合は、プラグインを使う方法もありますが、差し込み場所を自由に指定したいのであれば、リツイートボタンのコードを作って好きな場所に差し込みます。

公式ボタンは以下のTwitterのサイトで作成することができます：

http://twitter.com/about/resources/tweetbutton

サイトに丁寧に説明されているので、ボタンの種類を決めるだけで簡単に公式リツイートボタンが作れます。

できあがったコードをsingle.phpの好きな場所に差し込めばOKです。

3. Facebook いいね！（Like!）

Facebookのいいね！ボタンもTwitterの公式ボタンのように、Facebookのボタン作成ページでコードを作ります。

http://developers.facebook.com/docs/reference/plugins/like/

  • URL to Like：空のまま（空にすることでボタンが表示されているURLを使います）
  • Send Button：アンチェック（SendはFB上のお友達との共有に使います）
  • Layout Style：box_countを選択（他のボタンと表示を合わせます）
  • Width：幅は”50”ピクセル（他のボタンの横幅がそれくらいなので合わせます）
  • Show Face：アンチェック

右にプレビューが出ますので、残りの項目を設定して、見た目の微調整ができたら、Get Code ボタンを押して、コードを生成します。するとiframeとXFBMLの二つのコードが表示されます。

どちらか好きなコードを、single.phpの好きな場所に差し込みます。XFBMLを選んでも、iframeのコードが生成され差し込まれます。

4. 新はてなブックマークボタン

新しくなったはてなブックマークボタンも、はてなのサイト上でコードを生成します。

http://b.hatena.ne.jp/guide/bbutton

URLとタイトルにブログの情報を記入し、好きなボタンタイプを選べばコードの完成です。できあがったコードをsingle.phpの好きな場所に差し込みます。

ボタンのレイアウトを直す

HTML要素としてsingle.php上に順番にボタンのコードを並べても、ブラウザ上で見るとボタンは縦一列に並んでしまいます。通常、ボタンを横に並べる場合が多いと思いますので、HTMLのリスト表示とスタイルシートを使って、横に並べます。

HTML


<ul class="socialbutton">
    <li><?php topsy_retweet_big() ?></li>
    <li>"ここにLike!ボタンのコードを入れる"（長いので略します。）</li>
    <li>"ここにはてなブックマークのコードを入れる"（長いので略します）</li>
</ul>

CSS


ul.socialbutton li {
    float: left;
    width: 50px;
    margin-right: 10px;
}

まず、HTMLのリスト表示に使うulとliのタグを使ってボタンのリストを作ります。ulタグにはclassにsocialbuttonなどの名前を付けておきます。liの中にそれぞれのボタンのコードを入れておきます。

次に、スタイルシートに先ほどHTMLで作ったリストのスタイルを定義します。ulの中のli要素はfloatで順番に横に並ぶようにし、widthで横幅を指定します。margin-rightで各ボタンの右側の余白を指定して間を少し開けます。これで、liの順に左から右へボタンがきれいに並びます。