【WordPress】テーマのヘッダー部分に写真スライダーなどを挿入するには

WordPressにはいろいろなテーマがあって、画像中心のテーマなどではスタイリッシュなスライダーがタイトルの下にボーーンと表示されたりするものもあって格好いいですね。実はこれ、専用のテーマでなくても簡単に実装できるんです。今回は初心者向けにWordpressテーマのヘッダー部分に写真スライダーなどを挿入する方法を紹介します。構造さえ分かればスライダーだけでなくさまざまな要素をヘッダーに表示できるようになりますから覚えておくと便利です。

ほとんどの画像スライダープラグインでも使える

画像を一定時間で切り替える「スライダー」系のプラグインのほとんどは、メディアに取り込まれた画像を登録しておいてショートコードなどで表示するようになっています。有名なのは「MetaSlider」というプラグインです。スライダー系のプラグインは画像切替の方法がいろいろとあったり、画像の隅を透明化したり額縁のように表現したりする特別なエフェクト機能を備えたものなど多数ありますから、気に入ったものを探してください。

まずはこれらのプラグインを使ってスライダー表示する素材をつくりましょう。

サイトヘッダー部分にスライダーを挿入する方法

サイト内共通のタイトルやメニューを表示しているのは、「header.php」というファイルです（中には違うテーマもあるかもしれません）。このファイルは

1. ホームページであることを明示する
2. アクセス解析などのコードを記述する
3. CSSファイルの読み込み先を明示する
4. サイト内で共通して使う（どんなページや投稿でも使う）一番先頭（上）部分の表示内容も記述する

というような要素で作られています。

その中で

</head>

この要素には

<div id=””>～</div>

<div id=””>～</div>

ただし、header.phpなどphpファイルの中に直接ショートコードを入れても動作しませんから

 Knowledge Base

【Wordpress】ショートコードをPHPプログラムとして動作させる方法

https://www.momosiri.info/cms/wordpressphp/

あまり使う機会がないかもしれませんが、タイトルの通り、WordpressでショートコードをPHPプログラムとして動かす方法を紹介します。記事や固定ページなどでPHPのプログラムを使う場合には「EXEC PHP」などのプラグインが必要です。ショートコードをPHP化するケース ...

を参考にしてphpとして動作する形にして挿入するようにしましょう。

いい大きさでスライダーを挿入するためには作成しているサイトの幅を調べてスライダーの幅をそれに合わせることがポイントです。

スライダーの挿入例

 がんばれ！わが町名古屋の地域猫&我が家...  11 tweets

がんばれ！わが町名古屋の地域猫&我が家の家ネコ日記

https://momosiri.nagoya

ご訪問いただき、ありがとうございます 名古屋某所で皆さんから可愛がられている地域猫ちゃんたちの様子と、我が家で一緒に暮らしている元捨て猫【モモ】との日常など綴った日記サイトです 日記一覧を見る＞＞ 日

という私が管理しているサイトは「Simplicity」というテーマを使用しています。このテーマで上記サイトと同様の位置にスライダーを入れるためにはheader.phpの

<div class="alignright top-sns-follows">
              <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
              <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
              <?php endif; ?>
            </div>
－－－ここにスライダーのショートコードをphpとして動作するようにしたコード－－－
          </div><!– /#h-top –>
        </div><!– /#header-in –>
      </div><!– /#header –>

いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。

関連記事

WordPressで使い捨てメアド対策をしつつユーザー登録をしてもらう環境を作る方法

Wordpressでユーザー登録をしてもらう形態のサイトを作るとき、Wordpress標準の登録機能では画面が素っ気ないから別のもので・・・というところで登場するのが「Ultimate Member」や「Wp Membe...

【WordPress】パーマリンクの変更をする方法

これでアクセスアップ！！と言うわけではないですが、とりあえずブログ的な「URL/?p=000」というださい構造からは回避できたと思います

ネットオウルの「wpblog」から他のサーバーへサイトを移転するときの注意事項

サイト移転に欠かせないGoogle Search Consoleへのサイト移転リクエスト。これを行うことで旧サイトの検索情報が新サイトのものとして記録されるのでアクセスダウンのダメージを最小限に抑えることができます。これをwpblogで行う際に問題となる点と解消方法を紹介します。

【WordPress】標準のコメント機能をもっと便利に使う設定やプラグインいろいろ

最低限のスパム対策をしながら、Wordpress標準のコメント機能をより気軽にコメントしてもらえるようにする方法を紹介します。紹介する以外にもいろいろなプラグインが配布されていますので好みに合わせて探してみるのも面白いかもしれません。

【WordPress】パソコンやスマホにPush通知（更新通知）をしてアクセスアップ　～Push7の使い方～

サイトの読者を増やすためのツールである「プッシュ通知」機能。「Push通知」とは何ぞや？を含め、Push7というツールを使ってWordpressで作成したサイトで便利に使う方法などを紹介していきます。何度も書きますが、これをしたからアクセスアップというものではなく、アクセスアップするきっかけを作るかもしれない機能として使ってもらえればと思います。