<?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/"
	>

<channel>
	<title>WordPress | ユガラボ</title>
	<atom:link href="https://yugalab.net/archives/tag/4004_wordpress/feed" rel="self" type="application/rss+xml" />
	<link>https://yugalab.net</link>
	<description>pursue the beauty with yuga lab.</description>
	<lastBuildDate>Thu, 21 Jan 2016 08:10:11 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.7.7</generator>
	<item>
		<title>【WordPress】Google Calendar Events プラグインの導入方法</title>
		<link>https://yugalab.net/archives/4896</link>
					<comments>https://yugalab.net/archives/4896#comments</comments>
		
		<dc:creator><![CDATA[ユーリ]]></dc:creator>
		<pubDate>Fri, 22 Jan 2016 03:00:27 +0000</pubDate>
				<category><![CDATA[technical]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://yugalab.net/?p=4896</guid>

					<description><![CDATA[<p>そういえば私はWebクリエイターなんだった…お仕事関連のメモで、Google Calendar Events(Simple Calendar)のプラグイン導入方法です。Google Calendar EventsとはWo [&#8230;]</p>
<p>The post <a href="https://yugalab.net/archives/4896">【WordPress】Google Calendar Events プラグインの導入方法</a> first appeared on <a href="https://yugalab.net">ユガラボ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>そういえば私はWebクリエイターなんだった…<br />お仕事関連のメモで、Google Calendar Events(Simple Calendar)のプラグイン導入方法です。<br /><span id="more-4896"></span><br /><h3 class="section_title putit_caption l_green">Google Calendar Eventsとは</h3><br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_thumb.jpg"><img loading="lazy" class="alignnone size-full wp-image-4898" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_thumb.jpg" alt="20160122_thumb" width="300" height="185" /></a><br />WordPressのプラグインで、Googleアカウントのカレンダー機能で作成したイベントなどを、<br />WordPress上に取得・表示することができるプラグインです！<br /><br />WordPress上ではなく、Googleアカウントのカレンダーを編集するだけでページに反映されるので、管理画面が苦手なクライアントさんにも使い易いかもしれません。<br />Simple Calendarとも言うみたいです。どちらが正式名なんでしょうか。<br /><br />とても便利なプラグインなのですが、使えるようにする迄の手順がなかなか多い上、<br />英語なのでちょっとたいへんです。<br /><br />最近、仕様が変わった為、導入方法が大きく変わったようなので、日本語解説したいと思います！<br /><br />このプラグインの利用には、<br />カレンダーの取得を行う為の<span class="l_blue">「Google API Key」</span>と、<br />取得したいカレンダー固有の<span class="l_blue">「カレンダーID」</span>の二つが必要になります！<br />※利用にはGoogleのアカウントが必要ですので、持っていない方は予め作成してください。<br /><br /><span class="f_red">※この記事の情報は、2016年1月時点のものです。</span><br /><br /><h3 class="section_title putit_caption l_green">インストール</h3><br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_a01.jpg"><img loading="lazy" class="alignnone size-full wp-image-4900" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_a01.jpg" alt="20160122_a01" width="624" height="385" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_a01.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_a01-300x185.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />まずは落ち着いてプラグインをインストールしましょう。<br />新規追加から「Google Calendar Events」または「Simple Calendar」で検索します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_a02.jpg"><img loading="lazy" class="alignnone size-full wp-image-4901" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_a02.jpg" alt="20160122_a02" width="483" height="205" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_a02.jpg 483w, https://yugalab.net/wp-content/uploads/2016/01/20160122_a02-300x127.jpg 300w" sizes="(max-width: 483px) 100vw, 483px" /></a><br /><br />検索で出てきた緑のカレンダーマークのプラグインを選択し、インストールおよび有効化してください。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_a03.jpg"><img loading="lazy" class="alignnone size-full wp-image-4902" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_a03.jpg" alt="20160122_a03" width="557" height="458" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_a03.jpg 557w, https://yugalab.net/wp-content/uploads/2016/01/20160122_a03-300x246.jpg 300w" sizes="(max-width: 557px) 100vw, 557px" /></a><br /><br /><br /><h3 class="section_title putit_caption l_green">API Keyの取得</h3><br />まずは必要なもののうちの一つ、API Keyの取得について。<br />ここが一番面倒ですが、頑張って下さい！<br /><br />プラグインの有効化でメニューに現れた「Calendar」から「Setting」を選択します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b01.jpg"><img loading="lazy" class="alignnone size-full wp-image-4904" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b01.jpg" alt="20160122_b01" width="323" height="212" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b01.jpg 323w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b01-300x196.jpg 300w" sizes="(max-width: 323px) 100vw, 323px" /><br /></a><br />以下の画面に遷移します。<br />ここにGoogle API Keyを入力するのです。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b02.jpg"><img loading="lazy" class="alignnone size-full wp-image-4905" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b02.jpg" alt="20160122_b02" width="624" height="244" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b02.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b02-300x117.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /></a>ご丁寧にAPI Keyを取得する為のGoogle Developers Consoleへのリンクが貼ってありますので、クリックしてGoogleの管理画面へ移動します。<br /><br />こちらがGoogleの管理画面です。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b03.jpg"><img loading="lazy" class="alignnone size-full wp-image-4906" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b03.jpg" alt="20160122_b03" width="624" height="358" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b03.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b03-300x172.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />プロジェクトを新しく選択します！<br /><br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b04.jpg"><img loading="lazy" class="alignnone size-full wp-image-4907" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b04.jpg" alt="20160122_b04" width="624" height="383" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b04.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b04-300x184.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br />作成するプロジェクト名は、任意のもので適当につけてください。<br />利用規約に同意することで、作成ボタンが押せるようになります。<br /><br /><br />APIを作成したら、今度はAPIを有効状態にする必要があります。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b05.jpg"><img loading="lazy" class="alignnone size-full wp-image-4908" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b05.jpg" alt="20160122_b05" width="624" height="361" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b05.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b05-300x173.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /></a>API管理画面に移動します。<br /><br /><br />管理画面では、有効にしたいAPIを選択します。<br />ここでは、Calendar APIを選択します。<a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b06.jpg"><img loading="lazy" class="alignnone size-full wp-image-4909" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b06.jpg" alt="20160122_b06" width="624" height="425" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b06.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b06-300x204.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /><br /><br /></a>Calendar APIを選択したら、「APIを有効にする」をクリックし、有効にします！<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b07.jpg"><img loading="lazy" class="alignnone size-full wp-image-4910" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b07.jpg" alt="20160122_b07" width="624" height="297" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b07.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b07-300x142.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />もう少しです、頑張って！<br /><br /><br />今度は左メニューの認証情報を選択します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b08.jpg"><img loading="lazy" class="alignnone size-full wp-image-4911" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b08.jpg" alt="20160122_b08" width="624" height="362" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b08.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b08-300x174.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /></a>「新しい認証情報」を選択します。<br />APIとか認証とか面倒そうなことばが多いですが、おまじないだと思って我慢してください。<br /><br /><br />認証情報のうち「APIキー」を選択します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b09.jpg"><img loading="lazy" class="alignnone size-full wp-image-4912" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b09.jpg" alt="20160122_b09" width="624" height="323" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b09.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b09-300x155.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /><br /></a>APIキーの中からさらに「サーバキー」を選びます。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b10.jpg"><img loading="lazy" class="alignnone size-full wp-image-4913" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b10.jpg" alt="20160122_b10" width="624" height="190" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b10.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b10-300x91.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />名前はてきとうにつけてください。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b11.jpg"><img loading="lazy" class="alignnone size-full wp-image-4914" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b11.jpg" alt="20160122_b11" width="624" height="525" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b11.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b11-300x252.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br />作成！<br /><br />すると…<br />なぞのはっしゅもじれつが生成されり！<br />これがAPI Keyです！<br /><span class="f120">これです！これが欲しかったのです！</span><br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b12.jpg"><img loading="lazy" class="alignnone size-full wp-image-4915" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b12.jpg" alt="20160122_b12" width="624" height="302" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b12.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b12-300x145.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /></a>お疲れ様です！<br />これをすかさずコピーしまして、<br /><br />WordPress管理画面に戻り、<br />Calendar -&gt; Settingsの中のAPI Key入力部にペーストして、保存します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_b13.jpg"><img loading="lazy" class="alignnone size-full wp-image-4916" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_b13.jpg" alt="20160122_b13" width="624" height="306" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_b13.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_b13-300x147.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br /><br /><h3 class="section_title putit_caption l_green">カレンダーの作成</h3><br />こんどは、取得して表示する対象となる、カレンダーを作成します。<br />Googleのメニューからカレンダーを選択します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c01.jpg"><img loading="lazy" class="alignnone size-full wp-image-4918" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c01.jpg" alt="20160122_c01" width="374" height="598" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c01.jpg 374w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c01-187x300.jpg 187w" sizes="(max-width: 374px) 100vw, 374px" /></a><br /><br />カレンダー編集画面に来たら、WordPressで取得を行う用の新しいカレンダーを作成します。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c02.jpg"><img loading="lazy" class="alignnone size-full wp-image-4919" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c02.jpg" alt="20160122_c02" width="624" height="413" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c02.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c02-300x198.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />ポイントは「このカレンダーを一般公開する」をONにすることです。<br />一般公開状態のカレンダーでないと、WordPressに表示することができません。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c03.jpg"><img loading="lazy" class="alignnone size-full wp-image-4920" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c03.jpg" alt="20160122_c03" width="624" height="290" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c03.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c03-300x139.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /><br /></a>警告が出ますが、はいを選びます。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c04.jpg"><img loading="lazy" class="alignnone size-full wp-image-4921" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c04.jpg" alt="20160122_c04" width="624" height="156" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c04.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c04-300x75.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br /><h4 class="section_subtitle putit_caption">カレンダーIDの確認</h4>カレンダーを作成できたら、カレンダーの設定画面を開きます。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c05.jpg"><img loading="lazy" class="alignnone size-full wp-image-4922" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c05.jpg" alt="20160122_c05" width="624" height="507" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c05.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c05-300x243.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />メニュー内の「カレンダーのアドレス」のところにカレンダーIDが表記されています。<br />これをコピーしましょう！<a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_c06.jpg"><img loading="lazy" class="alignnone size-full wp-image-4923" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_c06.jpg" alt="20160122_c06" width="624" height="378" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_c06.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_c06-300x181.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /><br /></a><br />これで、取得に必要なAPI KeyとカレンダーIDが揃いました！<br />あとはWordPress側の調整だけです！<br /><br /><h3 class="section_title putit_caption l_green">カレンダーの設定(WordPress側)</h3><br />さっそく、WordPress管理画面に戻り、Calendarメニューから「Add New」を選択しましょう。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d01.jpg"><img loading="lazy" class="alignnone size-full wp-image-4925" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d01.jpg" alt="20160122_d01" width="354" height="279" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d01.jpg 354w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d01-300x236.jpg 300w" sizes="(max-width: 354px) 100vw, 354px" /><br /><br /></a><br />新規作成画面の下の方に、Calendar設定部があります。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02.jpg"><img loading="lazy" class="alignnone size-full wp-image-4926" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02.jpg" alt="20160122_d02" width="624" height="342" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d02-300x164.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br />その中の「Google Calendar」タブの中にCalendar IDを入力する部分があります。<br />ここに、先ほど作成したカレンダーのIDをコピペします。<br /><br />これで、WordPressでカレンダーを取得する準備が完了しました！<br /><br />あとは、画面右下に書いてあるショートコードを呼び出せば、<br />作成したカレンダーの情報が自動で取得されるようになります！<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02a.jpg"><img loading="lazy" class="alignnone size-full wp-image-4929" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02a.jpg" alt="20160122_d02a" width="531" height="306" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d02a.jpg 531w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d02a-300x172.jpg 300w" sizes="(max-width: 531px) 100vw, 531px" /><br /><br /></a>カレンダーを表示したい投稿内にショートコードを貼り付けてもいいですし、<br />テンプレートから直接カレンダーを呼び出したい場合は<br /><span class="f120"><br/><span class="f_red">&lt;?php</span> echo <span class="l_blue">do_shortcode(</span><span class="l_gray">&#8216;[calendar id=&#8221;92&#8243;]&#8217;</span><span class="l_blue">);</span> <span class="f_red">?&gt;</span><br/></span><br />とでも書いて、ショートコードを実行してあげてください。<br />※ショートコードの番号は適宜書き換えてください。<br /><br /><h4 class="section_subtitle putit_caption">動作確認</h4>WordPress上に取得したカレンダーは、初期状態ではこのように表示されます。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d04.jpg"><img loading="lazy" class="alignnone size-full wp-image-4930" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d04.jpg" alt="20160122_d04" width="624" height="519" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d04.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d04-300x249.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br />試しに、取得元のカレンダーを編集してみます。<br />Googleのカレンダー管理画面に戻り、適当にイベントを追加してみます。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d05.jpg"><img loading="lazy" class="alignnone size-full wp-image-4932" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d05.jpg" alt="20160122_d05" width="624" height="423" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d05.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d05-300x203.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br /><br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d06.jpg"><img loading="lazy" class="alignnone size-full wp-image-4931" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d06.jpg" alt="20160122_d06" width="624" height="427" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d06.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d06-300x205.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /><br /></a>追加が完了しました。<br /><br />WordPressのカレンダー表示ページに戻ってみると…<br />更新されて、たった今追加したイベントが表示されるようになりました。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_d07.jpg"><img loading="lazy" class="alignnone size-full wp-image-4933" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_d07.jpg" alt="20160122_d07" width="624" height="506" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_d07.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_d07-300x243.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><h3 class="section_title putit_caption l_green">カレンダーのカスタマイズ</h3><br />カレンダー設定画面の本文は、カレンダーのイベントをクリックした時に表示されるツールチップの中身と連動しています。<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_e01.jpg"><img loading="lazy" class="alignnone size-full wp-image-4934" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_e01.jpg" alt="20160122_e01" width="624" height="388" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_e01.jpg 624w, https://yugalab.net/wp-content/uploads/2016/01/20160122_e01-300x186.jpg 300w" sizes="(max-width: 624px) 100vw, 624px" /></a><br /><br />イベントをクリックすると表示されるコレです！<br /><a href="https://yugalab.net/wp-content/uploads/2016/01/20160122_e02.jpg"><img loading="lazy" class="alignnone size-full wp-image-4935" src="https://yugalab.net/wp-content/uploads/2016/01/20160122_e02.jpg" alt="20160122_e02" width="270" height="341" srcset="https://yugalab.net/wp-content/uploads/2016/01/20160122_e02.jpg 270w, https://yugalab.net/wp-content/uploads/2016/01/20160122_e02-237x300.jpg 237w" sizes="(max-width: 270px) 100vw, 270px" /></a><br /><br />これを編集したい場合は、以下のページを参考にテンプレートタグを書き換えてみてください！<br /><a href="http://docs.simplecalendar.io/event-template-tags/" target="_blank">http://docs.simplecalendar.io/event-template-tags/</a><br /><br />以上です！</p><p>The post <a href="https://yugalab.net/archives/4896">【WordPress】Google Calendar Events プラグインの導入方法</a> first appeared on <a href="https://yugalab.net">ユガラボ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://yugalab.net/archives/4896/feed</wfw:commentRss>
			<slash:comments>25</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】同じタグが付いた記事を関連記事として表示する</title>
		<link>https://yugalab.net/archives/560</link>
					<comments>https://yugalab.net/archives/560#respond</comments>
		
		<dc:creator><![CDATA[ユーリ]]></dc:creator>
		<pubDate>Wed, 17 Dec 2014 09:00:19 +0000</pubDate>
				<category><![CDATA[technical]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">http://yugalab.net/?p=560</guid>

					<description><![CDATA[<p>こんにちは！WordPressのテンプレート改造についてのメモです。このブログでも使用している、関連記事を表示する機能の追加方法です。 プラグインは使用いたしません！カスタマイズもバッチリです！ 関連記事の判定は、「記事 [&#8230;]</p>
<p>The post <a href="https://yugalab.net/archives/560">【WordPress】同じタグが付いた記事を関連記事として表示する</a> first appeared on <a href="https://yugalab.net">ユガラボ</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>こんにちは！WordPressのテンプレート改造についてのメモです。<br />このブログでも使用している、関連記事を表示する機能の追加方法です。<br /> プラグインは使用いたしません！カスタマイズもバッチリです！</p>
<div class="fold_post">
<br/>
関連記事の判定は、「記事に同じタグが使われている事」を条件に行います。<br/>
<br /><h3 class="section_title putit_caption l_green">仕組み<br/>ごくシンプルです！</h3><br />
<span class="l_red">
1.記事を表示する<br/>
2.表示した記事にくっついているタグを集める<br/>
3.集めたタグが付与されている記事を表示する<br/>
</span>
<br /><h3 class="section_title putit_caption l_green">作業内容</h3><br />
WordPressテーマのうち、<span class="l_blue">&#8220;single.php&#8221;</span>に若干の追加と、<br/>
こちらで紹介する<span class="l_blue">&#8220;part-tag-relatedpost.php&#8221;</span>をテーマフォルダに追加し、中身を必要に応じてカスタマイズしてください。<br/>
<br/>
まずは<span class="l_blue">&#8220;single.php&#8221;</span>のなかの、関連記事を追加したい位置に記述を追加します。<br/>
<span class="l_red bold"> the_post(); </span>で記事情報を取得している箇所より後に記述するようにして下さい。<br/>
(厳密には<span class="l_red bold"> get_the_ID(); </span>などの取得が可能な位置です。)
<pre class="brush:php html-script:true" title="single.php内">
&lt;?php
	$post_id = get_the_ID();	//記事の投稿IDを取得
	$tags = get_the_tags();		//この記事が含むタグをゲット
	echo get_template_part('part-tag-relatedpost'); //関連記事呼び出しテンプレート
?&gt;
</pre>
ここでは記事のIDをタグ配列を取得した上で、テンプレートパーツを呼び出す処理をします。<br/>
どちらも関連記事の取得および表示に必要な情報です。<br/>
<br/>
そして、呼び出すテンプレートパーツ本体がこちらです。<br/>
まずは全文コピペして動作を確認してみて下さい！<br/>
ファイル名は<span class="l_blue">&#8220;part-tag-relatedpost.php&#8221;</span>として下さい。<br/>
テーマフォルダにアップロードするのも忘れずに！<br/>
<pre class="brush:php html-script:true" title="part-tag-relatedpost.php">
&lt;?php
	global $post_id;	//グローバル変数より投稿IDをゲット
	global $tags;		//グローバル変数よりタグ情報をゲット
	$relatedpost_count = 0;	//関連記事を出力した数(カウンタ)
	$relatedpost_max = 3;	//関連記事を出力する最大数
	$related_taglist = [];	//関連記事を出力する為のタグリスト
	
	//記事からタグを集める
	foreach( $tags as $tag ):	//記事に含まれるタグの数だけ繰り返し
		$related_taglist[] = $tag -&gt; term_id;	//タグIDをリスト配列に追加
	endforeach;
	
	$args = array(				//出力用セッティング
	  'post__not_in'=&gt; array( $post_id ),	//おおもとの記事は除外する
	  'tag__in'		=&gt; $related_taglist,	//タグ配列に含まれるタグに含まれる記事を取得
	);
	query_posts( $args );		//設定より記事取得
	while ( have_posts() ) : 	//一致する記事が見つかった場合繰り返す
		the_post();
	?&gt;
		&lt;?php if( !$relatedpost_count ): /* 最初の記事の場合、ヘッダを付与 */ ?&gt;
			<div id="related_post_wrap">
				<header>
					関連記事
				</header>
		&lt;?php endif; ?&gt;
				<a href="&lt;?php echo get_permalink(); ?&gt;">
					<div class="related_post">
						&lt;?php the_title(); ?&gt;
					</div>
				</a>
	&lt;?php
		$relatedpost_count++;	//記事を出力した数を加算
		if( !($relatedpost_count < $relatedpost_max ) ):	//[if]目的の数記事を出力した場合
			break;												//ループを出る
		endif;
	endwhile;
	if( $relatedpost_count ):	?&gt;
			</div><!--id:related_post_wrap close-->
	&lt;?php
	endif;
	wp_reset_query();	//元のクエリを復帰
?&gt;</pre>

処理のながれに関しては、コメントに書いてある通りです。<br/>
デフォルトでは、以下のような構造で出力されます。<br/>
<a href="https://yugalab.net/wp-content/uploads/2014/12/20141218_b.jpg"><img loading="lazy" src="https://yugalab.net/wp-content/uploads/2014/12/20141218_b.jpg" alt="20141218_b" width="250" height="337" class="alignnone size-full wp-image-587" srcset="https://yugalab.net/wp-content/uploads/2014/12/20141218_b.jpg 250w, https://yugalab.net/wp-content/uploads/2014/12/20141218_b-222x300.jpg 222w" sizes="(max-width: 250px) 100vw, 250px" /></a><br/>
掲載日時やサムネイル表示などもループ内でテンプレートタグから呼び出せば可能です。必要に応じて、カスタマイズしてみて下さい！<br/>
</div><p>The post <a href="https://yugalab.net/archives/560">【WordPress】同じタグが付いた記事を関連記事として表示する</a> first appeared on <a href="https://yugalab.net">ユガラボ</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://yugalab.net/archives/560/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
