WordPress便利プラグイン！スライドショーを作ってみる（ロゴ画像編）

前回は、「WordPress便利プラグイン！スライドショーを作ってみる（メイン画像編）」として、トップページに表示されるメイン画像をスライドショーにする方法を紹介しました。


今回は、どのページでもヘッダー部に表示される「ロゴ画像をスライドショーにする方法」を紹介します。

賢威のロゴ画像とメイン画像の表示の違い

僕は賢威を使い始めたころ、ロゴ画像とメイン画像の表示の違いについてはっきり理解していなくて、レイアウトを変える時に手間取った覚えがあります。


同じように、画像の表示の違いが今ひとつわからない人のために、簡単に解説。

賢威のテンプレートを適用した直後のトップページ

賢威のテンプレートを適用した直後にトップページを確認すると、次のようにデフォルトのメイン画像が表示されます。

トップページ以外の表示

デフォルトの状態では、投稿記事などのトップページ以外は次のように表示。

※メイン画像はトップページにのみ表示される画像なので、トップページ以外には表示されません。

ロゴ画像を追加したトップページ

賢威の管理画面からロゴ画像を追加すると、トップページは次のように表示。

※ロゴ画像とメイン画像の間にグローバルメニューが表示

トップページ以外の表示

ロゴ画像を追加した状態では、トップページ以外は次のようにj表示されます。

※ロゴ画像はトップページも含めて、どのページでも表示される画像です。

画像の表示の違いをまとめると、次の通り。

• メイン画像は、トップページにのみ表示される画像
• ロゴ画像は、どのページでも表示される画像

ロゴ画像の追加、削除手順

ロゴ画像、メイン画像の追加、削除手順は次の通り。

賢威の管理画面のメニューから、「賢威の設定」を選択すると、次の画面が表示されます。

ロゴ画像を追加したい場合は、ロゴ画像にある「画像を設定する」ボタンを押してメディアライブラリから追加。

ロゴ画像を削除したい場合は、画像のURLを削除。（赤枠）


メイン画像を追加、削除する場合は、賢威の管理画面のメニューから、「賢威の設定」→「トップページ」を選択。

以降の削除と追加の手順はロゴ画像と同じです。

スライドショーを作成する場合の注意事項

ロゴ画像をスライドショーにする手順は、PHPソースが違うだけでメイン画像編とほぼおなじです。


まずは、「スライドショーの作成」までの作業を済ませておいてください。


今回紹介するのは、本来ロゴ画像が表示される領域に、スライドショーを表示させる方法です。

したがって、賢威の管理画面でロゴ画像を設定しても、ロゴ画像やサイトのタイトルは表示されません。



以降の手順では、テンプレートは、賢威7のBeauty版（Gold）を例にしています。

以下の手順では、PHPのソースとCSSを修正します。
修正を間違えた場合、最悪WordPressが動作しない可能性もあるため、事前に必ずバックアップを取るようにお願いします。（自己責任でよろしくです）

では、すすめます。

スライドショーがロゴ画像部分に表示されるように設定する

PHPに貼り付けるスライドショーのコードをまず取得します。


管理画面のメニューより、「Meta Slider」→「Meta Slider」を選択。


スライド画面の右下「使い方」にある「テンプレートに含める」タブを選択し、その中に表示されているPHPのコードをコピー。

このコードはメモ帳にでも貼り付けておいてください。


管理画面のメニューより、「外観」→「テーマの編集」を選択。


修正するPHPソースを選択します。

右側の「テーマヘッダー（header.php）」を選択。


site_logoの文字列を目印に、以下の部分をコピーしたスライドショーのコードで置き換えます。

site_logoが含まれるh1タグの部分（青枠）
site_logoが含まれるpタグの部分（緑枠）



スライドショーのコードで置き換えた後のコード。（赤枠が置き換わった部分）

これで完成です。

どのページにジャンプしても、常にスライドショーが表示されるようになります。


一応これで完成なんですが、このままでは下の画像のようにスライド画像の上下にスキマがある状態になります。

このスキマもなくしたい場合は、更にCSSを修正します。

スライド画像の上下のスキマを削除

cssを修正します。

右下にある、スタイルのbase.cssを選択。


Ctrl+Fキーでsite-header-contsという文字列を検索し、以下のようにpaddingの30pxを0pxに修正します。
　→　

これでスライド画像の上下もスキマがなくなりました。

『完成版スライドショー』

スライドショーでブログを華やかに

前回の記事とあわせて、ブログのヘッダー部をスライドショーにする方法を紹介しました。


ブログにスライドショーを使ってみたい人は、記事を参考に挑戦してみくてください。


＜ 「WordPress便利プラグイン！スライドショーを作ってみる（メイン画像編）」