<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>WPCMS.jp &#187; レイアウト</title>
	<atom:link href="http://wpcms.jp/tag/%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88/feed/" rel="self" type="application/rss+xml" />
	<link>http://wpcms.jp</link>
	<description>WordPressをCMSとした企業サイトやポータルサイト、Webサービス開発方法やTipsなど。 ファーストエレメントが運営する、WordPressに特化した技術系ブログ。</description>
	<lastBuildDate>Sat, 24 Dec 2011 15:54:27 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://wpcms.jp/tag/%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88/feed/" />
		<item>
		<title>ウィジェット領域を２つ以上つくる</title>
		<link>http://wpcms.jp/195/</link>
		<comments>http://wpcms.jp/195/#comments</comments>
		<pubDate>Sat, 29 Mar 2008 15:51:51 +0000</pubDate>
		<dc:creator>みやざわ</dc:creator>
				<category><![CDATA[カスタマイズ/ハック]]></category>
		<category><![CDATA[インストール]]></category>
		<category><![CDATA[サイドバー]]></category>
		<category><![CDATA[サーバー]]></category>
		<category><![CDATA[スクリプト]]></category>
		<category><![CDATA[レイアウト]]></category>
		<category><![CDATA[使い方]]></category>

		<guid isPermaLink="false">https://sv69.xserver.jp/~fe01/wordpress4cms.net/195/</guid>
		<description><![CDATA[
]]></description>
			<content:encoded><![CDATA[<p><strong>WordPress</strong>の<strong>ウィジェット</strong>領域は、標準ではsidebar.php内の１カ所だけだが、index.phpやfooter.phpなど、その他のエリアにもウィジェット領域を持たせる。</p>
<p>■手順１：<br />
テーマフォルダ/functions.php　3行目
<div class="code">register_sidebar(array(</div>
<p>これを
<div class="code">register_sidebar<span style="color:#FF9800;">s</span>(<span style="color:#FF9800;">3,</span>array(</div>
<p>※数字は、ウィジェット領域の数</p>
<p><span id="more-195"></span><br />
　<br />
■手順２：<br />
（例：index.phpのループの前と後に２つの領域を挿入）<br />
テーマフォルダ/index.php　5行目　have_postsの前に以下を挿入
<div class="code">＜?php if ( !function_exists(&#8216;dynamic_sidebar&#8217;) || !dynamic_sidebar(<span style="color:#FF9800;">2</span>) ) : ?＞<br />
ここはウィジェット「２」<span style="color:#FF9800;">※ウィジェットに何も登録されていない時にここの内容を表示</span><br />
＜?php endif; ?></div>
<p>テーマフォルダ/index.php　40行目　endifの後に以下を挿入
<div class="code">＜?php if ( !function_exists(&#8216;dynamic_sidebar&#8217;) || !dynamic_sidebar(<span style="color:#FF9800;">3</span>) ) : ?＞<br />
ここはウィジェット「３」<span style="color:#FF9800;">※ウィジェットに何も登録されていない時にここの内容を表示</span><br />
＜?php endif; ?＞</div>
<p><a href="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-1.png" target="_blank"><img src="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-1-thumbnail2.png" width="300" height="296" border="0" align="" alt="WordPressウィジェット" /></a><br />
※分かりやすくするためにdivで囲って色を付けてあります。<br />
※サイドバーには、ウィジェットが登録されていない場合は従来どおりの標準的な内容が表示されます。</p>
<p>■手順３：ウィジェットを追加<br />
管理画面＞Design＞Widget<br />
にて、右側「Current Widget」のプルダウンメニューにウィジェット領域が３つ出来たことを確認し、それぞれの領域にウィジェットを設定する。左側に並んでいるウィジェットの「Add」ボタンを押すと右側に追加されるので、上下の順番をドラッグ＆ドロップで変えて「Save Changes」をクリック。<br />
<a href="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-3.png" target="_blank"><img src="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-3-thumbnail2.png" width="300" height="277" border="0" align="" alt="WordPressウィジェット" /></a></p>
<p>■結果：<br />
<a href="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-2.png" target="_blank"><img src="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/multiwidget-2-thumbnail2.png" width="300" height="282" border="0" align="" alt="WordPressウィジェット" /></a><br />
ループの前と後、右サイドバーそれぞれに別々のウィジェット領域が追加されました。標準のウィジェット類やアフィリエイトのバナー（テキストウィジェット）の他、PHPを実行可能なウィジェットも追加すれば、使い方次第でかなり凝った複雑なサイトでもすごく簡単にレイアウト変更ができるようになります、クライアント側でも。</p>
<p>■補足：<br />
テーマフォルダ/functions.php　4～7行目に、それぞれのウィジェットの前後に挿入されるタグ類を指定する「before_widget」「after_widget」「before_title」「after_title」という項目があります。標準ではそれぞれli、h2となっています。上記テストではそこはいじってないです。</p>
<p>※WordPress 2.5 RC2 でテストを行いました。なので管理画面などは英語表記です。エックスサーバーへのインストールもまったく問題なくスムーズに完了しました。前回投稿のerror_logの関係でインストールスクリプトが止まってしまうこともありませんでした。</p>
]]></content:encoded>
			<wfw:commentRss>http://wpcms.jp/195/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://wpcms.jp/195/" />
	</item>
		<item>
		<title>記事数に応じたアフィリエイト表示</title>
		<link>http://wpcms.jp/182/</link>
		<comments>http://wpcms.jp/182/#comments</comments>
		<pubDate>Mon, 28 Jan 2008 14:23:45 +0000</pubDate>
		<dc:creator>みやざわ</dc:creator>
				<category><![CDATA[カスタマイズ/ハック]]></category>
		<category><![CDATA[post]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[アフィリエイト]]></category>
		<category><![CDATA[サイドバー]]></category>
		<category><![CDATA[レイアウト]]></category>

		<guid isPermaLink="false">https://sv69.xserver.jp/~fe01/wordpress4cms.net/182/</guid>
		<description><![CDATA[
]]></description>
			<content:encoded><![CDATA[<p><strong>WordPress</strong>に限らずブログなどの動的なWebページでは、本文とサイドバーのレイアウト上のアンバランスが生じることがよくありますね。それを軽減するためのTipsになれば。。</p>
<p>■目的：<br />
カテゴリ一覧や検索結果などで<span style="color:#FF6500;">記事数が少ない場合のみ</span>、<strong>アドセンス</strong>や<strong>アフィリエイト</strong>広告を記事リストの最後に表示する。</p>
<p>■現状：<br />
検索結果が１件しかなかった場合など、サイドバー側はひたすら長く続き、本文側は空白が続く、という見た目よろしくない状態。かといって、検索結果が少なかった場合を想定して本文側に広告を挿入すると、記事数が多かった場合には本文側が膨らむ…。</p>
<p><span id="more-182"></span><br />
■方法：<br />
本文側の記事ループ下に下記を挿入。<br />
「現在のページ内の記事数が３件より少ない」場合のみ、広告を表示する。</p>
<div class="code">＜?php if(<span style="color:#FF6500;">$wp_query-＞post_count ＜ 3</span>): ?＞<br />
&#8212;アドセンス、その他アフィリエイト&#8212;<br />
＜?php endif; ?＞</div>
<p>以上</p>
<p>■解説：<br />
$wp_query は、言ってみれば今ループで展開中のクエリを指し、post_countで展開中のループの数を得ることができます。なので、post_countが３より少なければ以下実行、となります。</p>
<p>記事ごとの文字数もバラバラだろうし、これだけでは解決しないかもしれませんが、マシにはなりますよね？</p>
<p>■補足：<br />
サイドバー側を囲っても同じことですね。５件以上だったらサイドバーのアドセンスを表示する、とか。組み合わせればもっとフレキシブルに。</p>
]]></content:encoded>
			<wfw:commentRss>http://wpcms.jp/182/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://wpcms.jp/182/" />
	</item>
		<item>
		<title>ウィジェット</title>
		<link>http://wpcms.jp/180/</link>
		<comments>http://wpcms.jp/180/#comments</comments>
		<pubDate>Sun, 27 Jan 2008 09:00:37 +0000</pubDate>
		<dc:creator>みやざわ</dc:creator>
				<category><![CDATA[プラグイン/ウィジェット]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CMS]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[SQL]]></category>
		<category><![CDATA[ウィジェット]]></category>
		<category><![CDATA[サイドバー]]></category>
		<category><![CDATA[バナー広告]]></category>
		<category><![CDATA[ポータルサイト]]></category>
		<category><![CDATA[レイアウト]]></category>

		<guid isPermaLink="false">https://sv69.xserver.jp/~fe01/wordpress4cms.net/180/</guid>
		<description><![CDATA[ようやくWordPressの「ウィジェット」機能を使用し始めました。 ウィジェットとは、サイドバーの項目を並び順もその中身も管理画面から簡単に変更することができる機能です。Ajaxを使用してドラッグ＆ドロップで直感的に並 [...]]]></description>
			<content:encoded><![CDATA[<p>ようやく<strong>WordPress</strong>の「<strong>ウィジェット</strong>」機能を使用し始めました。</p>
<p><a href="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/widget_01.png" target="_blank"><img src="http://wpcms.jp/wp/wp-content/themes/wpcms/_images/widget_01-thumbnail2.png" width="250" height="221" border="0" align="left" alt="widget_01.png" /></a>ウィジェットとは、サイドバーの項目を並び順もその中身も管理画面から簡単に変更することができる機能です。Ajaxを使用してドラッグ＆ドロップで直感的に並べ替えできます。ver.2.2以降のWordPressでは標準機能となっています。また2.0、2.1もプラグインを入れることで対応させることができます。</p>
<p>■ウィジェット機能のプラグインをダウンロード（2.2以降は不要）</p>
<p><a href="http://automattic.com/code/widgets/" target="_blank">Widgets Plugin Downloads</a> Automattic, Inc.<br />
<br clear="all"></p>
<p><span id="more-180"></span><br />
さて。WordPressを<strong>CMS</strong>としてサイト構築に使用する際、単に最新コメントやカテゴリやアーカイブを張り込めるだけでは意味がありません。また、すべてのウィジェットが１つのサイドバーに詰め込まれるようでは、ポータルサイトのようなコンテンツが豊富なCMS的利用の場合には、レイアウトに無理が生じる。</p>
<p>最初の、ウィジェットとして設定できる内容については、標準で用意されている基本的なもののほか、プラグイン同様、世界中でつくられて配布されています。なにより自由項目ともいうべき「テキスト」ウィジェットがあるので、アフィリエイトや固定バナーなどはこれが使える。Googleアドセンスを放り込んで動作を確認しました。</p>
<p>ただ、CMSとして使用する場合は「ウィジェット内でPHPを実行できる」もしくは「ウィジェットが簡単につくれる」と利用価値がいっきに高まります。これができれば、今までテンプレートの中に書き込んでいたクエリやSQLをウィジェットの中に放り込んで実行し、場合に応じて簡単にセクションの並び替えが簡単にできる…たとえコードが読めないクライアントの担当者であっても。</p>
<p>PHPの実行は、従来から「runPHP」「ExecPHP」というプラグインにより投稿画面内でPHPを使えたので、ウィジェット紹介サイトで探すとすぐに見つかりました。</p>
<p>■ウィジェット紹介サイト：<br />
<a href="http://widgets.wordpress.com/" target="_blank">WordPress Widgets</a><br />
<a href="http://codex.wordpress.org/Plugins/WordPress_Widgets" target="_blank">List of Widgets</a></p>
<p>■PHPを実行できるウィジェット「ExecPHP」：<br />
<a href="http://ottodestruct.com/blog/2006/04/09/fun-with-widgets/" target="_blank">Fun with Widgets</a> Nothing to see here</p>
<p>ウィジェットをダウンロードしたら、プラグインと同じディレクトリにFTPでアップロードして、プラグイン管理画面で「有効化」するだけです。表示＞ウィジェットに移動すると、ページ下部「利用できるウィジェット」に「PHP Code 1」というウィジェットが追加されているはずです。</p>
<p>２番目に挙げた、ウィジェットのセクション数については、幸い複数のウィジェットグループを２つ以上のセクションで使えるようです。<a href="http://automattic.com/code/widgets/themes/" target="_blank">register_sidebar() の代わりに register_sidebars(数字または名称) とするだけ</a>のようです。あとでソースを見てみよう。</p>
<p>WordPressに標準でついてくるテーマ（テンプレート）はウィジェットが使えるサイドバーが１個だけですが、設定が簡単なようなのでウィジェットに対応したダブルサイドバーのテーマもきっとたくさん配布されているでしょう。</p>
<p>&#8212;</p>
<p>続いて次回、「<strong>ウィジェットでバナー広告管理</strong>（掲載期限付き）」の設定例を紹介します。</p>
]]></content:encoded>
			<wfw:commentRss>http://wpcms.jp/180/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://wpcms.jp/180/" />
	</item>
		<item>
		<title>記事のいろいろな情報をGetする。</title>
		<link>http://wpcms.jp/170/</link>
		<comments>http://wpcms.jp/170/#comments</comments>
		<pubDate>Thu, 20 Sep 2007 01:37:53 +0000</pubDate>
		<dc:creator>みやざわ</dc:creator>
				<category><![CDATA[カスタマイズ/ハック]]></category>
		<category><![CDATA[post]]></category>
		<category><![CDATA[title]]></category>
		<category><![CDATA[キャンペーン]]></category>
		<category><![CDATA[コンテンツ]]></category>
		<category><![CDATA[テンプレート]]></category>
		<category><![CDATA[レイアウト]]></category>
		<category><![CDATA[文字化け]]></category>
		<category><![CDATA[日本語]]></category>

		<guid isPermaLink="false">https://sv69.xserver.jp/~fe01/wordpress4cms.net/170/</guid>
		<description><![CDATA[
]]></description>
			<content:encoded><![CDATA[<p>WordPressはテンプレートタグを使うことで簡単にいろいろな情報を呼び出せるけど、もっといろんな呼び出し方がある。phpの関数を併用する場合などは、例えば記事の本文を呼び出す場合</p>
<div class="code">the_content()</div>
<p>を使う代わりに</p>
<div class="code">$post->post_content</div>
<p>という呼び出し方をすると、phpの関数の引数に放り込めるので、いろいろに加工できる。</p>
<p><span id="more-170"></span><br />
　<br />
■記事の本文or抜粋を取得</p>
<div class="code">$post->post_content<br />
$post->post_excerpt</div>
<p>例）本文を60文字でカットする</p>
<div class="code">＜?php echo <span style="color:#FF6500;">mb_substr(</span>$post->post_content<span style="color:#FF6500;">, 0, 60)</span>; ?＞</div>
<p>「substr」はphpの関数。１つ目の引数でトリムの対象となるコンテンツを指定、２つ目の引数はトリム開始位置（0=１文字目）、３つ目の引数がトリム終了位置＝文字数。日本語などマルチバイトの場合はあたまに「mb_」を付けてやらないと末尾が文字化けします。<br />
※strip_tagsも併用しないと、開始タグだけ残されてレイアウト崩れる可能性あり（strip_tagsは指定したタグ以外のすべてのHTML/phpタグを除去してくれる）。先にstrip_tagsで囲ってから、mb_substrを。</p>
<p>■特定のカスタムフィールドの値を取得</p>
<div class="code">＜?php echo <span style="color:#FF6500;">get_post_meta(</span>$post->ID<span style="color:#FF6500;">, キャンペーン終了日,  true)</span>; ?＞</div>
<p>※現在の記事の「キャンペーン終了日」というカスタムフィールドに入れた値が表示されます。</p>
<p>■記事の投稿スラッグを表示</p>
<div class="code">$post->post_name</div>
<p>■記事IDを取得</p>
<div class="code">$post->ID</div>
<p>■最終更新日時を表示<br />
<a href="http://wpcms.jp/article/80583003.html">コチラの記事にて</a></p>
]]></content:encoded>
			<wfw:commentRss>http://wpcms.jp/170/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://wpcms.jp/170/" />
	</item>
	</channel>
</rss>

