賢威テンプレートのトップページにスライドショーを設置する方法

ワードプレスを使ってサイト作成しているかたは とっても簡単に スライドショーが設置できます。

今回 私は賢威テンプレートのトップページにスライドショーを設置しました。

suraidoこんな感じ^^ですね!!

これは画像スライドショーを簡単に設置できる

「WordPress Content Slide」というプラグインを使いました。

「ワードプレス Content Slide」の使い方から トップページへの設置方法を説明します♪

まずは ワードプレスのダッシュボードから プラグインを追加してください。

WordPress プラグインのインストール手順

次に WordPress Content Slide の設定をします。 難しそうに見えますが簡単なのでゆっくり行きましょう^^

①下準備編 画像を用意しよう

まずは スライドさせたい画像を用意してください。(スライドさせるために最低2枚はほしいですがまぁ1枚でも大丈夫です)

画像の追加方法は

ワードプレス 画像を追加する方法を参考ください0^0^0

②設定してみよう

WordPress Content Slideをインストールした際 管理画面左下のほうに

setei

←ここ

のように Content Slide と表示さますのでContent Slide→Content Slideとすすみます。

すると一番上に↓が表示されます。

slide04-297x300

General Settings」の欄で、画像のサイズを入力します。

←ここ「Image Width:500px / height:300px」となっているので、

ここを実際に表示したい画像のサイズに変更します。

その下の

Border width: はスライドの縁取り線の太さ
Border Color: はスライドの縁取り線の色

です!!

次に「Images Source Settings」の欄を設定します

slide06-300x293

←このへんのNumber of custom Images はスライドさせる画像の枚数を設定します。

←この辺の

Custom Image 1
Image 1 SRC  1枚目スライド画像ファイルのURL
Image 1 Link   スライド画像をクリックしたときのリンク先URL

Custom Image 2
Image 2 SRC   2枚目スライド画像ファイルのURL
Image 2 Link   スライド画像をクリックしたときのリンク先URL

のように設定してください♪

画像ファイルのURLの確認方法は

画像urlの確認方法をどうぞ!!

設定が終わりましたら save stting をクリックして保存してください。

これで スライドショーの設定は終了です。

次に賢威テンプレートのトップページに表示させる方法です。

③賢威テンプレートのトップページに表示させる設定

ここからPHPの編集に入りますので 失敗に備えて必ず変更箇所はバックアップを取っておきましょうね♪

ワードプレス管理場面から 外観→テーマの編集を選択してください。

メインインデックスのテンプレートindex.phpを編集します。

<!–▽メインコンテンツ–>
<div id=”main-contents”>

の下に

<h2>○○○○○</h2>
<?php if (function_exists(‘wp_content_slider’)) { wp_content_slider(); } ?>

と入力します。

○○○○○はお好きな言葉に置き換えてください。

すると

<!–▽メインコンテンツ–>
<div id=”main-contents”>
<h2>○○○○○</h2>
<?php if (function_exists(‘wp_content_slider’)) { wp_content_slider(); } ?>
<?php if(is_home() and get_query_var(‘paged’) <= 1): ?>
<!–最新情報–>
<h2><?php _e(‘Latest Info’,’keni’) ;?></h2>

のようになりますね!!

ファイルを更新 をクリックして保存してください。

はい!!!終了ーーーーー

これで トップページにスライドショーが反映されてます^^

途中でつまずいちゃったら
toiawase

おきがるに

お問い合わせ

くださいね^^

————————————————————-

追記

権威用スライドショーは Easing Slider “Lite” のほうがよい件

上記記事でスライドショーの設定方法を説明いたしました

レスポンシブweb対応スライドショープラグインの

Easing Slider “Lite”

を使用したほうがよいということに気が付きました。

WordPress Content Slideはレスポンシブweb対応

ではないのでスマホで見るとレイアウトが崩れてます。

Easing Slider “Lite”の記事を書いてくれた

「マメボー」さんに感謝です(*^^)v

Easing Slider “Lite”の設定方法は

マメボーさんの記事で詳しく説明されていますm(__)m

設定方法はWordPress Content Slideとにていますので

すでにWordPress Content Slideを設定された方

お手数ですがEasing Slider “Lite”の変更をおねがいします。

             夢実現プロジェクト・メールマガジン講座

AYUMI&HIROの夢実現プロジェクト始動
あなたは現状に満足されてますか?


magajin

本気で稼ぐ気があるのならご参加下さい。
アフィリエイトで稼ぐためのメールマガジン講座

btn043

この記事はお役に立てましたでしょうか? また他の誰かの役に立ちそうだと思っていただけたら、下のボタンから共有をいただけましたら運営者のモチベーション維持にもつながります。

ブログランキング・にほんブログ村へ
にほんブログ村

コメントを残す

サブコンテンツ

このページの先頭へ