【SANGOカスタマイズ】ヘッダー下に画像スライドショーを挿入する方法

当サイトでは、サルワカさんのWordPressテーマ「SANGO」を使用しています。

WordPressテーマ「SANGO」のヘッダー下に画像スライドショーを入れてみましたので、やり方をご紹介いたします。やや難しかったですが、テーマカスタマイズ初心者の私でもできました。

今回のカスタマイズでは、このようにタイトル下にスライドショーを挿入することができます。

 

 

全体の流れを確認

今回私が実施した方法について、作業の全体像は以下の通りです。スライドショー作成用のプラグインを使用して作ったプラグインのコードを、子テーマのPHP編集でテンプレートに埋め込みます。

  • STEP.1
    プラグインをインストール
    スライドショーを作るために、「Meta Slider」か「Smart slider」をインストール。
  • STEP.2
    スライドショー作成
    簡単にスライドショーを作れます。
  • STEP.3
    子テーマのPHP編集
    子テーマを使ってPHPを編集します。
  • 完成!

では、実際にスライドショーを作成していきましょう!

プラグインをインストールし、スライドショーを作成する

まずは、スライドショー作成に使うプラグインをインストールします。

今回は、「Meta Slider」か「Smart slider」を使用します。どちらも無料で使えますが、Meta Sliderの方が日本語に対応している分使いやすいです。細かくカスタマイズしたい場合は、Smart Sliderがおすすめ。ただし英語です。

それぞれのプラグインの使い方は、このサイトを参考にさせていただきました。これを参考に好きなようにスライドショーを作成します。

参考 Meta Sliderの設定と使い方:スライダーの設置affilabo.com 参考 大体10分で設置できる!「Smart Slider 3」でレスポンシブ対応したコンテンツスライダーを作ってみよう!IncLoop
MEMO
いずれのプラグインもレスポンシブに対応しています。ちなみにSANGOの場合は、コンテンツ幅(記事一覧とカテゴリの合計)が最大1000pxのようですので、スライドショーの幅を1000px、設置を中央寄せにしておけば、見た目もスッキリ設置できます。

 

子テーマのPHP編集

私も今回まで、PHP何それ美味しいの?状態で、PHPとは何のことやら全く知りませんでした。でも、どうやらテーマのカスタマイズにはこれをいじる必要があるらしい。

そして、それは親テーマではなく子テーマでいじるとのこと。他のサイト様を参考にさせていただきながら、見よう見まねでやってみました。

超参考になったのはこの記事。

参考 画像のスライドショー(スライダー)を作成・表示できるプラグインWordPress超初心者講座

子テーマでPHP編集の経験がある方ならば、この記事を見れば簡単にわかると思います。

やることとしては、これだけです。

  • 親テーマから「index.php」を子テーマにコピー
  • プラグインから吐き出されたコードをコピー
  • 子テーマのindex.phpのget_header(); ?>の直下にプラグインのコードを貼りつけ

貼りつけするコードは、プラグインから取得できるこのようなコード。

コード
<?php echo do_shortcode("[metaslider id=xxxx]"); ?>

phpをいじるには、FileZillaというソフトとテキストエディタが必要になるのですが、「それらもまだ持っていない。初めてやる!」という方はサルワカさんの記事を参考にすると非常にわかりやすいです。

参考 【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ

これで、無事ヘッダー下にスライドショーが設定できたかと思います。スライドショーの内容を変更したいときは、プラグインのスライドショーを弄るだけなので、一度埋め込んでしまえば非常に簡単です。

 

おわり。

 

コメントを残す

メールアドレスが公開されることはありません。