<?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 - IQパズルステップ</title>
	<atom:link href="https://chokomon.com/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://chokomon.com</link>
	<description>ちょこっと頭を良くするIQパズル問題集</description>
	<lastBuildDate>Sat, 23 Apr 2022 12:17:11 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://chokomon.com/wp-content/uploads/2022/02/cropped-icon512-32x32.png</url>
	<title>WordPress - IQパズルステップ</title>
	<link>https://chokomon.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【WordPress】サイトのタイトルロゴにマウスオーバーで動きをつけるカスタマイズ（コピペでOK）</title>
		<link>https://chokomon.com/003-diver-01/</link>
					<comments>https://chokomon.com/003-diver-01/#respond</comments>
		
		<dc:creator><![CDATA[東鳥子]]></dc:creator>
		<pubDate>Sat, 09 Apr 2022 07:36:30 +0000</pubDate>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[diver]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[カスタマイズ]]></category>
		<category><![CDATA[健忘録]]></category>
		<guid isPermaLink="false">https://chokomon.com/?p=2070</guid>

					<description><![CDATA[このサイトのタイトルロゴ「エンジニアステップ」にマウスを乗せると5px下に動くようになっています。この実装方法をご紹介します。テーマは「diver」です。 実装方法 WordPressのダッシュボード　&#62; 外観　＞ カスタマイズ　&#038;g…]]></description>
										<content:encoded><![CDATA[
<p>このサイトのタイトルロゴ「エンジニアステップ」にマウスを乗せると5px下に動くようになっています。この実装方法をご紹介します。テーマは「diver」です。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="660" height="371" src="https://chokomon.com/wp-content/uploads/2022/04/003-diver-01-1.png" alt="" class="wp-image-2093"/></figure></div>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">実装方法</h2>



<p><strong>WordPressのダッシュボード　&gt; 外観　＞ カスタマイズ　&gt; 追加CSS</strong>　にコードを書きます。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img decoding="async" width="660" height="371" src="https://chokomon.com/wp-content/uploads/2022/04/003-diver-02.png" alt="" class="wp-image-2094"/></figure></div>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<p>追加CSSにこちらのコードを貼り付けてください。</p>



<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">/* タイトルロゴのマウスオーバー */
#logo:hover {
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    border-bottom: none;
    box-shadow: none;
}</pre></div>



<p></p>



<p>ちなみにタイトルロゴのサイズを変える場合はこちらのコードを貼り付けてください。</p>



<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">/* タイトルロゴのサイズ変更 */
#logo img{
height:100px !important;
}</pre></div>



<p>ロゴのサイズは、856×212ピクセルで作っています。</p>



<p>大きさはお好みで、height:○○pxを変更してください。<br>このサイトのタイトルロゴのサイズは、100pxにしました。</p>



<p>OKならば「公開」をクリックして出来上がりです。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://chokomon.com/003-diver-01/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】投稿記事をランダムに表示する「ランダムリダイレクト」（中級者向け）</title>
		<link>https://chokomon.com/002-random/</link>
					<comments>https://chokomon.com/002-random/#respond</comments>
		
		<dc:creator><![CDATA[東鳥子]]></dc:creator>
		<pubDate>Fri, 08 Apr 2022 08:07:23 +0000</pubDate>
				<category><![CDATA[ブログ]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[健忘録]]></category>
		<guid isPermaLink="false">https://chokomon.com/?p=1920</guid>

					<description><![CDATA[ボタンをクリックするとランダムな記事が表示される方法を紹介します。 下のランダムボタン（サンプル）↓をクリックしてみてください（別ページで開きます）。 投稿「サンプル記事A」、「サンプル記事B」、「サンプル記事C」、「サンプル記事D」、「サ…]]></description>
										<content:encoded><![CDATA[
<p>ボタンをクリックするとランダムな記事が表示される方法を紹介します。</p>



<p>下のランダムボタン（サンプル）↓をクリックしてみてください（別ページで開きます）。</p>



<div class="wp-block-dvaux-button button radius block dvaux btn"><a class="dvaux-button_link medium" style="background-color:#3aacad;color:#fff;border-color:#ccc" target="_blank" rel="noopener" href="https://chokomon.com/random/">ランダムボタン（サンプル）</a></div>



<p></p>



<p>投稿「サンプル記事A」、「サンプル記事B」、「サンプル記事C」、「サンプル記事D」、「サンプル記事E」の5つが、クリックごとにランダムで表示されます。</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">導入方法</h2>



<h5 class="wp-block-heading">STEP 1：固定ページを新規作成し、パーマリンクを変更する</h5>



<p>パーマリンクをrandomに変更する</p>



<h5 class="wp-block-heading">STEP 2：page-random.phpを新規作成</h5>



<p>page-random.phpにコードを書く</p>



<h5 class="wp-block-heading">STEP 3：page-random.phpをアップロード</h5>



<p>テーマのディレクトリ直下にpage-random.phpをアップロードする</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">STEP 1：固定ページを新規作成</h2>



<p>WordPressで固定ページを新規作成します。</p>



<p>パーマリンクを「random」にします。</p>



<p><strong>（例）https://○○○.com/random</strong></p>



<p></p>



<h2 class="wp-block-heading">STEP 2：page-random.phpを新規作成</h2>



<p>エディターで「page-random.php」を作成します。</p>



<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// source code from page-random.php implemented through WP_Query

// Random Redirection Page Template

// set arguments for WP_Query()
$args = array(
    'posts_per_page' =&gt; 1,
    'orderby' =&gt; 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post-&gt;have_posts () ) {
  $my_random_post-&gt;the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}</pre></div>



<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-dvaux-frame sc_frame_wrap normal titlenone"><div class="sc_frame_title normal titlenone" style="background-color:#ccc"></div><div class="sc_frame" style="background-color:#fff;border-color:#ccc">
<p>参考サイト→　<a rel="noreferrer noopener" href="https://www.smashingmagazine.com/2012/04/random-redirection-in-wordpress/" target="_blank">SMASHING MAGAZINE：WordPressでのランダムリダイレクト</a>（英語）</p>
</div></div>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">STEP 3：page-random.phpをアップロード</h2>



<p><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">※注意　<br>必ず子テーマを作り、バックアップをとってください。</mark></strong><br><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">テスト環境でテストしてから作業してください。</mark></strong><br><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">作業は自己責任でお願いします。</mark></strong><br><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">あなたのサイトに問題が起きても当方は責任を負いません。</mark></strong></p>



<p></p>



<p>page-random.phpファイルをFTPソフトなどを使って、<br>あなたのWordPressのテーマディレクトリにアップロードします。</p>



<p><strong>&gt; public_html &gt; wp-content &gt; thmes &gt;<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-red-color">「お使いのテーマ名」_child</mark></strong></p>



<p></p>



<p>WordPressでは固定ページを表示するときに、<br>パーマリンクに対応する名前のファイル名があると<br>それを自動で読み込んでくれます。</p>



<p>固定ページの場合「page-パーマリンク名.php」という<br>ファイルが存在していると、<br>page.phpではなく、<br>そのphpファイルを読み込んでくれます。</p>



<p>ページを公開したあと、ページにアクセスするユーザは、<br>自動的にランダムな投稿が表示されます。</p>



<p></p>



<p>あとは、ランダムボタンを作り、<br>リンクを＜<strong>https://○○○.com/random</strong>＞とすればリダイレクトされます。</p>



<p></p>



<p>このランダムボタン（サンプル）↓は<br>カテゴリー＜サンプル＞の記事のみランダムで表示するようにしました。（別ページで開きます）。</p>



<div class="wp-block-dvaux-button button radius block dvaux btn"><a class="dvaux-button_link medium" style="background-color:#3aacad;color:#fff;border-color:#ccc" target="_blank" rel="noopener" href="https://chokomon.com/random/">ランダムボタン（サンプル）</a></div>



<p></p>



<p>おみくじ感覚で記事が表示されるので色々なアイデアで使えそうですね。(*'ω'*)</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<p>この方法はリダイレクトを使っているので、サーバーが高速でないと威力を発揮しません。<br>当サイトでも使っている <a rel="noreferrer noopener" href="https://px.a8.net/svt/ejp?a8mat=3N8443+EXMICQ+CO4+609HU" target="_blank">エックスサーバー</a> <img decoding="async" border="0" width="1" height="1" src="https://www11.a8.net/0.gif?a8mat=3N8443+EXMICQ+CO4+609HU" alt="">ならサクサク動くのでおススメです。<br>一度ためしてみてください。</p>



<div class="img_wrap">
<a href="https://px.a8.net/svt/ejp?a8mat=3N8443+EXMICQ+CO4+6ARKX" rel="nofollow noopener" target="_blank">
<img loading="lazy" decoding="async" border="0" width="728" height="90" alt="" src="https://www22.a8.net/svt/bgt?aid=220408275903&amp;wid=004&amp;eno=01&amp;mid=s00000001642001058000&amp;mc=1"></a>
<img loading="lazy" decoding="async" border="0" width="1" height="1" src="https://www16.a8.net/0.gif?a8mat=3N8443+EXMICQ+CO4+6ARKX" alt="">
</div>



<p><a href="https://px.a8.net/svt/ejp?a8mat=3N8443+EXMICQ+CO4+6ARKX"></a><br></p>
]]></content:encoded>
					
					<wfw:commentRss>https://chokomon.com/002-random/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
