Meta Sliderの使い方ーWordPressプラグイン【初心者向け】
WordPressのプラグインの使い方を初心者向けに紹介する記事です。今回は、スライドショーで画像を表示するのに便利なプラグイン、Meta Sliderの使い方を紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
WordPressのプラグインの使い方を初心者向けに紹介する記事です。
今回は、スライドショーで画像を表示するのに便利なプラグイン、Meta Sliderの使い方を紹介します。
目次
田島メンター！画像のスライドショーを記事に貼りたいんですけど、WordPressにそういう機能ってないんですか？
標準ではないけどプラグインを使えばできるよ。
おすすめってありますか〜？
「Meta Slider」なんてどうかな？
Meta Sliderとは
Meta Sliderは、jQueryを用いた4種類のコンテンツスライダーが使えるプラグインです。
スライドのサイズやエフェクトの強弱など細かく設定できるので、1つのスペースに画像や動画をいくつも見せたい人にはおすすめのプラグインでしょう。
また、無料で使えるのも特徴です。
Meta Sliderの使い方
このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。
インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。
有効化すると、管理画面の左メニューに「Meta Slider」という項目が追加されているはずです。
Meta Sliderでスライドショーを追加していきます。
「空のスライドショーを作成する」をクリックします。
「新規スライダー」の部分をクリックすると、スライドに名前を付けることができます。
スライドに画像を追加するには、右上の「スライドを追加」をクリックします。
メディアライブラリが開かれるので、スライドに使用したい画像を選択してから、右下の「スライドショーを追加」をクリックします。
※画像を選ぶ時にShiftボタンを押しながらクリックすることで、複数の画像を選択できます。
各画像タブの「一般」ではEntry manuallyを選択すると画像にタイトルを付けることができます。
(設定によってはスライド上で表示されます)
メディアライブラリーのキャプションから自動的に付けることもできます。
URLを入力すると画像にリンクを貼ることが可能です。
「SEO」タブではUse the image titleのチェックを外すと、必要に応じてtitle属性とalt属性を入力することができます。
この項目は入力していなくてもスライド作成には問題ありません。
「切り抜き」タブでは、画像のサイズがスライドのサイズより大きい場合に、どの部分を表示させるかを設定できます。
また、この編集画面で各画像の項目をドラッグ＆ドロップすることで、表示させる順番をいつでも入れ替えることができます。
右メニューではスライドの種類を4種類から選ぶことができます。
今回は”FlexSlider”を使用しています。
ここではスライドの大きさやナビゲーションの表示形式などを設定できます。
メニュー右下に表示されているショートコードは、スライドを記事に貼り付ける際に使用するものです。
旧エディタではMeta Sliderはビジュアルエディタからスライドを直接挿入するメニューがあるため、このコードはここで控えておかなくても大丈夫です。
ブロックエディタでは[]の部分だけコピーしておきます。
右上メニューの「保存」をクリックすると、スライドが保存されます。
この際「Preview」を選択すると、その場でどのように表示されるか確認できます。
スライドを保存したらWordPress管理画面から「投稿」→「新規追加」を選択します。
ブロックエディタの場合：
WordPress 5.0から標準のエディタがブロックエディタになりました。
ブロックエディタでは、先ほどのショートコードをショートコードブロックを選択して挿入します。
右上の「プレビュー」から「新しいタブでプレビュー」を選択すると、挿入したスライダーが確認できます。
旧エディタの場合：
記事内のスライドを追加したいところで、ビジュアルエディタの「スライドショーを追加」をクリックします。
作成したスライドショーの一覧が表示されます。
ここで表示されるのは、最初に「新規スライドショー」の部分をクリックして入力した名前です。
貼り付けたいスライドの名前を選択して、「スライドショーを挿入」をクリックします。
記事内に、以下のようなショートコードが追加されました。
このコードは、Meta Sliderの管理画面で表示されていたものと同じものです。
(作成した各スライドにはidが自動で設定されます)
記事を保存・公開するとWordPressのサイト上でスライドショーが表示されます。
このようにスライドショーが表示されれば完了です。
今回の記事は以上です。
単にスライドショーっていうだけでなく、効果も選択できるのが良いですね！
そうだね。それにスライドショーを用意しておけばいつでもすぐに挿入できるのも良いね♪
はい♪
[PR] WordPressで挫折しない学習方法を動画で公開中
WordPressを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
WordPressでのサイト制作を学習していて、このように思ったことはありませんか？
テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。
まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
