業界事情ナビ | いろんな業界の裏話・体験談

ブラック企業体験談や、航空業界、歯科業界の裏事情をお話しさせていただきます!!!

wordpressでサイトをスライドさせたい時は「Meta slider」というプラグインがオススメ!

   

ddd3dad613828f087d6aaaa8edf03129_s

ホームページのメイン画像で動きをつけたい!スライドをさせたい!

WordPressでホームページを管理されている方なら誰でも簡単にその設定ができてしまいます。
この「業界事情ナビ」でも先日スライド機能を導入しました。
特別な知識は不要ですので、参考にしていただければと思います。

スポンサーリンク

スポンサードリンク

メイン画像の切り替え「Meta Slider」導入の流れ

STEP1 プラグイン「Meta Slider」をダウンロード

プラグイン検索で「Meta Slider」をダウンロードして、
有効化してください。

STEP2 サイズ等の設定

左再度メニューに「Meta Slider」というボタンが出現しますので、
そちらを押してください。
そこで、メインビジュアル1枚目に設定したい画像、2枚目に設定したい画像を選んでください。
※すでにメイン画像は用意してあるものとします。

右側のメニューでメインビジュアルのサイズを設定してください。
ちなみにこのサイトでは、
Flex slider
幅:980
高さ:400
効果:フェード
テーマ:標準
矢印:チェック
ナビゲーション:点
となっております。

保存してプレビューを見ると、どんな風に見られるのかが確認することができます。

STEP3 ソースコードを入手

右下「使い方」
のところで、投稿に挿入するのか、テンプレートに含めるかで
コードが変わりますので、どちらかを選択してください。
今回はメインビジュアル(テンプレート)にスライド機能を入れるので
右側の「テンプレートに含める」を選択してください。

その中にあるコード
<?php
echo do_shortcode(““);
?>
を取得してください。id=oooのところは人によって異なります。
丸ごとコピーして控えておきましょう。

STEP4 ソースコードを挿入

先ほど控えましたコードをテンプレートに挿入します。
左サイドメニューから外観→テーマの編集を選びましょう。
こちらのサイトは「header.php」を編集しました。

85行目の
<?php get_template_part( ‘st-header-image’ ); //カスタムヘッダー画像 ?>

<?php
echo do_shortcode(““);
?>

に書き換えましょう。

※id=oooは人によって異なりますので、ご自身でコピーしたソースコードを貼り付けましょう。

以上で、設定完了です。

更新して確認してみましょう。
また、テーマの編集をされる際は、間違えて、サイトのレイアウトが崩れてしまわないように全ソースコードのコピーは保存するようにしておきましょう。

もし、間違えてしまって、且つ、バックアップをとっていなかったのですべて消えてしまった!となりますと、これまでの蓄積がすべて無に帰します。

ですので、そこだけは慎重に作業しましょう。

まとめ

今日は、ホームページのメイン画像で動きをつけたい!という方向けに
Wordpressでのメイン画像の切り替えプラグイン「Meta Slider」導入の
流れを説明させていただきました。

メインビジュアルにスライド機能をつけるとなると、特別な知識が必要で
難しそうなイメージをもたれるかもしれませんが、そんなことはありません。

「Meta Slider」というプラグイン1つで、簡単に設置することができました。

メイン画像が切り替わるというのは、アクセスしたユーザーの目に留まる
1つの作戦でもありますので、試してみてはいかがでしょうか。

以上、参考までに。

 - WEB制作業界