STORK19でトップページに画像スライドショーを設置する手順【かんたん3ステップ】

このページでは、OPENCAGEのWordPressテーマ「STORK19」を使ったWEBサイトで、トップのメインビジュアル部分に画像スライドショーを設置する方法を紹介してます。

トップページにフルサイズの画像スライドショーを設置したい方の参考になると思います。

画像スライドショー設置イメージ

ピンク色の部分が幅100%のスライドショーになります。

画像スライダーの設置イメージ

画像スライダーの設置手順

次の流れで作業を進めます。

  1. プラグイン「Meta Slider」をインストール
  2. 画像スライドショーの設定
  3. テンプレートを修正(スライドショー設置)

※トップページのテンプレートは「page.php」を前提としています

スライドショープラグインのインストール

画像スライドショーのプラグイン「MetaSlider」をインストールします。

検索キーワードは「meta slideshow」です。

プラグイン「meta slider」

スライドショーの設定

「meta slider」プラグインをインストール後、スライドショーの設定を行います。

まずは数枚写真を登録します。

meta sliderプラグインの初期設定

スライドショーの設定が完了しましたら、画面右下のshortcodeをコピーしておきます。

meta sliderのショートコードコピー

テンプレート修正

WordPress管理メニューの「外観」から「テーマエディター」を選択し、テーマファイルから「個別投稿ページ(page.php)」を選択ます。

※ここでは、ご自身の環境に合ったテーマファイルを選択してください

テーマエディターを選択

次に選択したファイルの中身が表示されるので、「<?php get_header(); ?>のすぐ下」にコピーした画像スライドショーのショートコードを貼り付けてから「ファイルを更新」します。

コピーした画像スライダーのショートコードを貼り付ける

以上で設定が完了になります。

トップページを表示し、画像スライドショーが正しく表示されていることを確認します。

画像スライダーの設置イメージ

 

以上で、STORK19テーマのトップページに画像スライドショーを設置する作業が完了となります。

【PR】人気のWordPressテーマ「STORK19」

このテーマはブログ運営でほしいと思う機能がほぼ搭載されていて個人的にとても気に入ってます。

ブログ以外ではコーポレートサイトなどを作るときにも使えてとても便利です。

Category: Webサイト作成Tags: stork19wordpressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eleven + twelve =