2011年10月1日土曜日

Wordpressで任意のウィジェットを記事中に表示させる方法:メモ

スポンサーリンク

Wordpressで便利なプラグイン。できることは色々あるようですが、特にサイドバーやフッターにウィジェットを表示するものが多いかと思います。
この記事はウィジェットを記事の中に表示する全くスマートでない方法を忘れないようにするためのメモです。


前提


冒頭に書きましたが、プラグインでサイドバーなどに表示出来るウィジェットを記事の中に取り込むことが目的です。index.phpや配布されているウィジェットをカスタマイズせずにできるだけ簡単に表示させることを目指しました。

phpやwirdpressに詳しい方ならもっとスマートにできるはずですが、それほど詳しくない人間でもできる力技の方法です。

用意するもの


用意するものは以下の通り。

  • 表示させたいプラグイン
  • プラグイン『Exec-PHP

カスタマイズ又は参照するファイルは以下の通り。

  • functions.php

あとは、記事の中にタグを書き込み、cssで成形します。

概要


結論に近いですが、作業の概要です。

まず、管理画面の『外観』>『ウィジェット』に表示させたいウィジェットだけを入れた場所を作ります。数が足りない場合はfunction.phpをカスタマイズして増やします。
あとは目的のウィジェットを表示させるためのコードを作り、記事に記入。記事内でphpを動かすために『Exec-PHP』をインストールして有効化すれば完了。

これだけです。

方法


方法と言っても、ウィジェトの追加は簡単ですので、必要なのは目的のウィジェットを表示させるためのコードを作るぐらいです。

表示させる為にはウィジェットのIDをしらなければなりません。知るためにはfunctions.phpを見ます。twentytenのテーマファイルにあるfinction.phpを例に挙げると、370行目ぐらいにある『function twentyten_widgets_init()』を探します。


function twentyten_widgets_init() {
	// Area 1, located at the top of the sidebar.
	register_sidebar( array(
		'name' => __( 'Primary Widget Area', 'twentyten' ),
		'id' => 'primary-widget-area',
		'description' => __( 'The primary widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

	// Area 2, located below the Primary Widget Area in the sidebar. Empty by default.
	register_sidebar( array(
		'name' => __( 'Secondary Widget Area', 'twentyten' ),
		'id' => 'secondary-widget-area',
		'description' => __( 'The secondary widget area', 'twentyten' ),
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );



あとは各『register_sidebar』に記載された『'id' => 'ID名',』を見つけるだけです。この場合だと、『primary-widget-area』必要な情報です。

実際には、管理画面の『外観』>『ウィジェット』の画面でウィジェットを入れた場所に対応してたidを使います。

あとは、記事内に


<ul>
<?php dynamic_sidebar( 'ID名' ); ?>
</ul>


を記述するだけ。『Exec-PHP』を有効化していれば表示されます。

注意点


この方法が力技だという事以外にもいくつか注意点があります。
基本的には表示やcssでの成形に関わる事柄です。

<ul>を必ず付ける

前述の<?php dynamic_sidebar( 'ID名' ); ?>で表示されるHTMLはリスト要素の<li>で囲まれています。<ul>まではありませんので、<ul>を付けないと表示がおかしくなります。

実際にはfunctions.phpのサイドバーの箇所で生成するタグを指定しているので、そこを書き換えて対応する方法もあります。しかし一部だけを変えるとややこしくなるのであまりお勧めできません。構造上矛盾が生じない場合は、おとなしく<ul>で囲んだ方が良いと思います。

cssの書き方

最終的にブラウザで表示されるHTMLの構成やclass名などを知らなければcssで装飾ができません。

FirefoxのFirebugやブラウザ付属のソースを見るツールなどを使って必要な情報を取得する必要があります。ここが分かれば、場合によってはウィジェットの中身の装飾もかえる事ができます。地味ですが最終的な出力から辿って行くことで、意外となんとかなる場合もあります。

結び


今回も時間をかなり食いました。

最初はウィジェットのテンプレートファイルを見て必要な情報を手に入れて任意のところに呼び出せばよいと考え、該当のウィジェットの中身を見ていましたがさっぱり分からず。WEBを徘徊してみても、なかなか良い情報はありませんでした。

結局出力されるウィジェットのタグが分からず、出力される場所自体のタグを無理矢理利用しました。無茶な方法ではありますが、ウィジェットの入れ替えも簡単ですし、触るのは記事内の表記のみという簡単さです。

最終手段ではありますが、どうしてもウィジェットを記事に埋め込みたい場合には有効な方法かも知れません。

スポンサーリンク

0 件のコメント :

コメントを投稿