WordPressのテーマであるSimplicityのトップページにコンテンツスライダーを導入する方法(*´∀`)♪

シェアする



URLをコピーする
WordPressのテーマであるSimplicityのトップページにコンテンツスライダーを導入する方法(*´∀`)♪
https://fwww7.com/2015/03/26/post-1050/

IT大好きFwwwです

最近テーマを内部SEOに強いSimplicityに変えた訳ですが、

いろいろカスタマイズしてきました。

その中でも、メニュー下にコンテンツスライダーを導入することに成功しましたので、

その方法を紹介したいと思います。

スポンサーリンク

Simplicityのトップページのメニュー下にコンテンツスライダーを導入しようヽ(*´∀`)ノ

まずコンテンツスライダーって何?

簡単に説明すると、当ITブログのトップページのメニュー下に設置してあるこれです

[smartslider2 slider=”5″]

スライドショーみたいなものですね!!

このコンテンツスライダーがあるだけで、ホームページの印象が全然ちがいますよね

ではこのコンテンツスライダーをSimplicityに導入していきましょう

Slideshowというプラグインの特徴

このSlideshowというコンテンツスライダーを導入できるプラグインの良いところは、

なんと言っても日本語対応なところです

それとPHPコード以外にもショートコードと言って記事内にも挿入できるんです

Slideshowをインストールしよう

ではでは早速プラグインをインストールしましょう

インストール方法その1

WordPress.orgからダウンロードの場合はこちらです

Slideshow

上のリンクでダウンロードしたSlideshowを、

プラグイン-新規追加-プラグインのアップロードからzipをアップロードして有効化してください


インストール方法その2

WordPressから追加する場合は説明に従ってインストールしていってください

検索ボックスでSlideshowと検索しましょう

検索ボックスでSlideshowを入力

左のSlideshowは最終更新が5年前と明らかに違うので右のネズミ色のほうをインストールします

Slideshowは右

そして有効化してやります

Slideshowを有効化

これで有効化は完了しました

次は実際にSlideshowを使っていきます

Slideshowを使ってコンテンツスライダーを作成しよう

Slideshowを有効化したらスライドショーというメニューが現れるので、新規追加をします

するとこのような画面になります

スライドショー

スライドショー

ではでは今回は初心者様にも分かりやすいように、説明しますので簡潔にしますね

まずは、自分がわかりやすいように”simplicityのメニュー下コンテンツスライダー”などと名前をつけましょう

アニメーション設定では、

  • 左へスライドか右へスライド
  • スライドを切り替える秒数

などを設定しましょう

私の感覚ですが5秒は少し遅いです

2.3?3.0がおすすめです

SnapCrab_NoName_2015-3-26_9-54-41_No-00

次に画面設定ですが、

  • スライドショーの高さは500がおすすめです
  • タイトルと説明文を表示するの項目は任意で設定

画面設定

まだ下にいろんな詳細設定ありますが、特に気にしなくて大丈夫です

次に画像を挿入します

Slides Listの画像スライドで追加していきましょう

画像挿入

なお追加したスライドはドラック&ドロップで入れ替えできます

そして追加したらこのようになると思うのですが、

  • タイトルと説明文は先ほどの設定で”はい”にしていればスライドに表示されます
  • URLはスライドをクリックした時に開くページのことです
  • URLを開いた場合に同じウインドウか新しいウインドウで表示するかです
  • チェックボックスは付けておいた方がいいです

スライドの説明

最後に公開をします

コンテンツスライダーを公開

そして、完成したコンテンツスライダーのコードをここからコピーします

なお上のショートコードは記事内に挿入できます

下の赤枠の中のPHPコードをコピーしましょう

コードをコピー

simplicityのメニュー下にコンテンツスライダーを導入しよう

まずは外観-テーマの編集にいきます

そしてこのように”before-main.php”というのがあるので編集画面にいきます

before-main.php

ここに先ほどコピーしたコードをコピーしてください

なお、コンテンツスライダーをトップページにだけ表示したい場合は、

<?php if (is_home() && !is_paged()) : ?>

これを消してここにコンテンツスライダーのコードを貼ってください
<?php endif; ?>

このようにして、次ページ以降も表示したい場合は、

このようにします

私はトップページだけに表示させたいのでこうしました

コード例

これでファイルを更新をします

するとトップページにコンテンツスライダーが現れます

ということでお疲れ様でした

スポンサーリンク

シェアする



URLをコピーする
WordPressのテーマであるSimplicityのトップページにコンテンツスライダーを導入する方法(*´∀`)♪
https://fwww7.com/2015/03/26/post-1050/

オススメ記事