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

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

公開日:2017年2月6日 使い方など

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スライダーを挿入するのは「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へ挿入する

今回例に挙げる

はスライダーの設定画面に<?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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします


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

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

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

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

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】