Web Shakehands
Web Shakehands

Language


ワードプレスの「ホーム、ブログ、サンプル、その他」のページにそれぞれ別のメイン画像を設定する


今回が「メイン画像を変更」するというテーマの記事の最終回となります。

ホームページとブログの中のメイン画像を下記のように変更します。

1.Home = スマートスライダー3 プラグイン

2.サンプルページ = 「サンプルページ」と書かれたメイン画像

3.ブログトップページ = 「ブログ」と書かれたメイン画像

4.ブログ記事 = 「ブログ」と書かれたメイン画像

5.上記以外のページ = 「その他」と書かれたメイン画像

このようにそれぞれのページのメイン画像をPHPを使って変更します。

以前の記事はこちらからご確認をいただけます。


≪ワードプレスのPHPを使って、それぞれのページに別のメイン画像を設定する≫
http://global-s-h.com/wordpress/ja_php_change.php

≪ワードプレスの各ページに違うメイン画像を設定する≫
http://global-s-h.com/wordpress/ja_main_change.php

≪ワードプレスのメイン画像の重要性≫
http://global-s-h.com/wordpress/ja_mainsec.php



まずはスマートスライダー3プラグインを導入しておきます。

導入方法はこちらの記事をご確認いただけます。

≪Smart Slider 3 スライダープラグインを導入する≫
http://global-s-h.com/wordpress/ja_slider.php









次にそれぞれのメイン画像を「メディアライブラリー」に格納し、URLを取り出せるようにしておきます。




「メディアライブラリー」に画像をアップし、URLの取り出し方はこちらの記事からご確認いただけます。
http://global-s-h.com/wordpress/ja_main_change.php



「テーマ編集」画面を開き、「テーマヘッダー」にphpコードを挿入します。


※<?php get_template_part( 'template-parts/header', 'headerimg' ); ?>は削除します。
この記述はテンプレートによって違います。



PHPを使ってそれぞれのページに別のメイン画像を表示する方法はこちらからご確認いただけます。
http://global-s-h.com/wordpress/ja_php_change.php


1.Home = スマートスライダー3 プラグイン

2.サンプルページ = 「サンプルページ」と書かれたメイン画像

3.ブログ記事 = 「ブログ」と書かれたメイン画像

4.ブログトップページ = 「ブログ」と書かれたメイン画像


5.上記以外のページ = 「その他」と書かれたメイン画像


今回は「3.」の「is_single()」がブログの記事を指しているということ、 「4.」の「is_home()」がブログのトップページを指しているのがポイントです。

ホームページとブログを振り分ける設定方法はこちらからご確認いただけます。
http://global-s-h.com/wordpress/ja_front.php


そして、最大のポイントは最初の「if」を使う代わりに、それ以外は「elseif」が使われている点です。

最初の「if」が適用されなかった場合には次の「elseif」に移動します。

次の「elseif」が適用されなかったら、その次の「elseif」に移動します。

適用される個所が来るまで続けられます。

そして、「if」も「elseif」も適用されない場合には、最後の「else」が適用されます。

今回は「その他のページ」が該当します。

page02 page03

が「その他のページ」になります。

各ページに違うメイン画像を導入することができました。













コードを掲載させていただきますので、必要な個所をコピペで導入できます。
また、xxxxのところはご自身のものを記載します。

これはどのテンプレートでも当てはまると思います。

また、たとえば、メイン画像を変更した上で、ブログのページだけは、ブログ専用のロゴに変更したいという場合などは「header.php」ファイルと「page.php」ファイルを複製する方法も使えば実現できます。

PHPでメイン画像を変更する方法と上手く組み合わせることで、こうしたことも出来るようになります。

「header.php」ファイルと「page.php」ファイルを複製してそれぞれのページのヘッダーに変更を加える方法はこちらからご確認いただけます。
http://global-s-h.com/wordpress/ja_main_change.php


このエントリーをはてなブックマークに追加


最新ワードプレス記事!

2017-06-22 「BackWPup」プラグインを使ってワードプレスのデーターをバックアップしよう NEW!


2017 3/2 ワードプレスの子テーマを作成する


2017 2/17 ワードプレスの「ホーム、ブログ、サンプル、その他」のページにそれぞれ別のメイン画像を設定する


2017 2/02 ワードプレスのPHPを使って、それぞれのページに別のメイン画像を設定する


2017 1/20 ワードプレスの各ページに違うメイン画像を設定する


2017 1/5 ワードプレスのメイン画像の重要性


2016 12/15 「WPTouch Mobile Plugin」を使ってスマートフォンサイトのデザインを変更する


2016 11/17 「JETPACK」プラグインを使ってアクセス解析、セキュリティ対策を行う


2016 10/6 ブログ記事にアイキャッチ画像を導入する


2016 09/23 Smart Slider 3 スライダープラグインを導入する


2016 08/11 「Contact Form 7」プラグインを使用する


2016 07/14 「All in One SEO Pack」プラグインを使う


E-mail を入力するだけで、あなたのHPを作るための
ノウハウメールマガジンを無料でお届けします
E-mail:
  

上部へ