WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】ヘッダー部分にスライダーなどのコンテンツを挿入する方法(汎用例)

公開日:2017(平成29)年2月6日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressでサイトを作っていてやりたいことの代表格が「ヘッダー(サイトの一番上の部分)に画像スライダーなどを入れたいということではないでしょうか??

もちろん無料で配布されているテーマにもヘッダー画像が設定できるものがあったり、スライダーが最初から実装されているものもあるのですが、画像入れ替え時の効果などあまり気に入らないけど外したくても分からないからそのまま・・・なんて人もいるのでは??

サイトのヘッダーといえばホームページの顔、スライダー画像だけではなく、広告を固定挿入したり、決まった文言を常に表示したり・・・といろいろやってみたい場所ではありますね。

配布されたままのテーマは汎用性が保てるように(要するにどんな環境でも使えるように)WordPress標準で設定ができている項目である「サイトのタイトル」や「サイトの概要」、カスタマイザーで設定した画像などは表示できるようになっているものの、どのサイトも似たようなデザインになってしまいますね。

今回紹介する「スライダー」を挿入するだけでもぐっとオリジナルなサイトになるのでぜひ挑戦してみてください。

なお、挿入するスライダープラグインは

を例に説明しますが、他のプラグインでもやり方は一緒ですから置き換えて考えていただけば大丈夫です。

サイトがどういう仕組みでページを表示しているかを確認する

いきなりですが、作成した投稿などがどうやって表示されているかをご存じですか?恐らくこのページをご覧になっている方は詳しくご存じないと思いますので、できる限り簡単に、できる限り完結に説明しますね。

まず、ページの中で表示されるすべての情報はバラバラに「データベース」と呼ばれる情報の箱のようなところに保存されています。

そして、「このページを表示してください」という要求(=アクセス)があると、有効化している「テーマ」に書かれている順番で、書かれている情報がデータベースから引っ張り出されて表示されているのです。

ですから、テーマがなければWordPressのサイトは何も表示できません。逆を言えば使っているテーマの中身が分かればどんどんカスタマイズできるということでもあるのです。

実は、配布されているテーマはどこかのテーマを元に引っ張り出して表示する内容をどこに表示するかを替えたり、そこで表現する方法(デザイン)を替えたりしたものがほとんどです。その中の機能として、関連記事を表示したり、ヘッダーにスライダー画像を挿入したりできるようにあらかじめ設定されているだけの話なのです。

これをまずご理解いただいて、次の項目へ進みましょう。

テーマの内容からページを開くプログラムを見てみる

ここからはどのテーマでも共通であろうものを前提に説明します。中には独自のファイル名を用いているものもありますが、通常はこんな仕組みになっています。

テーマのファイルはWordPressのダッシュボードから「外観」→「テーマの編集」を開き、使っているテーマを選択すると出てきます。

「うわっっっいっぱいファイルあるじゃん!」という位画面右側に〇〇.phpなどというファイルが出てきますね。でもここから紹介する構造が基本なのでそれが分かれば第一歩クリアです。

トップページを表示するためのファイル

サイトのトップページで表示される内容を決めているファイルですメインインデックスのテンプレート (index.php)などと書かれています。

固定ページを表示するためのファイル

文字通り、固定ページを表示する際にどんな情報をどんな順番で引っ張り出すのかを決めるファイルです。個別投稿ページ (page.php)と書かれています。

投稿を表示するためのファイル

こちらは「投稿」で書いて公開したものを表示する際に使われるファイルです。個別投稿 (single.php)などと書かれています。

ここに直接ページへ表示する内容がずらっと書かれているテーマもありますが、大抵の場合はその中で別のファイルを読み込んで・・・という記述があるものがほとんどですので、個別投稿 (single.php)などを開いてみましょう。

一番先頭に、<?php get_header(); ?>(他にもあるかもしれませんが)という記述ありませんか?

これは一番初めにヘッダー情報を読み込んでね!という記述です。ヘッダー情報というのは。ページの一番上の部分のことです。ここの部分はどのページでも同じものを設定して表示した方が管理が楽なのでこういう構造になっているのです。

QA AnalyticsQA Analytics

スライダーを挿入するのは「header.php」

では一覧からヘッダーに表示する情報が書かれている「header.php」を開いてみてください。またまた呪文のような文章がずらっと出てきますね。でもじっと見ていると流れが見えてきます。ヒントをいくつか紹介しますね。

まずはよく出てくる<?php 〇〇〇 ?;<の部分。これをテンプレートタグといいます。命令文ということになりますね。

先ほど書いた<?php get_header(); ?>はheader.phpから情報をGET(持ってきて)してねという文章です。これが分かれば「header.php」の概要が見えてきます。

まず<head>~</head>の部分にはページに表示されない設定情報などが書かれていますから、その下を見るようにします。

<header>~</header>という部分がありますね。これが表示されるヘッダーの内容です
すると・・・

get_header_image
get_template_part(”)

などといった行がありますよね?これ1つ1つが部品になります。

それが分かると、何がどんな順で表示されているかが見えてきます。と同時にどこへスライダーを入れるかも見えてきます。

大抵の場合はこれらの部品が<div>~</div>という部品要素で囲まれていますから、それも踏まえてみてください。

では実際にスライダーを表示する方法へ移ります

スライダーのテンプレートタグをheader.phpへ挿入する

今回例に挙げる

画像やYoutube動画のプレビュー、投稿へのリンクなどをスライド表示するプラグイン「WonderPlugin Slider Lite」

はスライダーの設定画面に<?php 〇〇〇 ?;<で囲まれたテンプレートタグが表示されますからそれをコピペすれば完了!!です。案外簡単ですね。

でも・・・

こんなテンプレートタグを出力してくれないプラグインもあります。そんなときは・・・

<?php echo do_shortcode('ここにショートコード'); ?>

ここにショートコードと書かれたところに[ ]で囲まれたショートコードをコピペしてからテーマへ挿入すれば、ショートコードがテンプレートタグとして動いてくれるようになります。魔法ですね。


以上がWordPressテーマのヘッダー部分にスライダーなどのコンテンツを挿入する方法(汎用例)です。こういうのができるようになるとシンプルなテーマの方が使いやすいなぁと思うようになります。

おまけ、スライダーに装飾をする方法

ここまでくると、スライダーは挿入できたけど、外枠つけたい、外枠の角を丸くしてみたいなどという欲が出てきますね。ついでにこの方法を紹介します。

先ほど出てきた<div>~</div>という要素を使います

まず、テンプレートタグを<div>~</div>で囲みます。そうすることで「ここで一塊ですよ」と知らせることができます。

そして<div>を<div class=”slider”>という風にします。 class=”slider”を足すんですね。sliderという文字は分かりやすくテーマの中の他の要素で使っていないものなら何でもOKです。

そして、テーマのCSSに以下の行を追加します(id=”slider”の場合です)。

/************** トップスライダー *****************/
.slider{
border-radius: 15px;
border: 10px solid #042100;
}

「border-radius: 15px;」はスライダーの囲み線を15ポイントで角丸にしてください

「border: 10px solid #042100;」は線の太さは10px、実線(solid)で#042100というコードの色の線で回りを囲んでください

という意味です。これも簡単!!

興味のある方はぜひやってみてくださいね。