WordPress

ショートコードを使ってスライドショーを設置・設定する方法【ワードプレス】

今回の記事は、ショートコードを使ったスライドショーの設置と細かな設定方法を紹介しています。

  • 記事内のショートコードをコピペするだけで設置が可能です
  • 設定はショートコードを直接書き換えるだけです。難しそうに感じますが、この記事を読めば簡単に理解できるはずです

僕のウェブマガジン「GOKUI」はトップページにスライドショーを設置しています。

個人的な好みからすると動きのあるページはあまり好みではないのですが、技術的な興味があって設置してみました。

技術的に...といっても難しいことは何もなくて、ショートコードを埋め込むだけでこのような感じで動いてくれます。

学校薬剤師

「学校薬剤師」今年度最後の検査は雪景色の下で

本日は学校薬剤師として今シーズン最後の検査でした。 僕の担当する小中学校は岐阜県北部の雪深いところにあり、前日にスマホで天気予報をチェックしたところ「大雪」とのこと。 検査時間は限られるので時間に遅れる訳にはいかず、普段の通勤よりもずいぶんと早く自宅を出発しました。 幸い天気予報はすっかり外れたようで、空から雪は一つも落ちてこないし、道路も全く凍っていません。 ただ北に行けば行くほど、道路脇や野山に雪がどんどん増えていって、学校に着く頃には景色が一気に雪国に変わりました。 この頃には少し雪が降ってきたりし ...

続きを読む

ローバーミニ メーターパネル自作

Mini

ローバーミニ1000 純正メーターを流用した自作パネルを制作

車はノーマルが一番美しいと思っている僕なので、愛車の『89年式ローバーミニ 30th 1000』もずっとノーマル状態を維持しています。 ミニとの関わり方も、そのほとんどが、純正あるいはそれに近い部品を使用した『基本的なメンテナンス』と『壊れた部品の交換・修復』となる訳ですが、 そうは言っても、時々僕の中で変な虫が騒ぎ出すことがあります。 今回はそんなよく分からない虫が騒いだことで、僕の中にスイッチが入り、 結果、純正メーターをメーターパネルにモディファイすることになってしまいました。 きっかけは、最近この ...

続きを読む

Mini

ローバーミニ1000 遊び心を持ってヒーターコアを加工・交換

ローバーミニ1000 新品ヒーターコア開封→残念 現在オーバーヒート対策真っ只中の、我が愛車『89年式ローバーミニ 30th 1000』です。 前回の作業で、新品購入したヒーターコアのサイズが違うことが判明したため、仕方なく途中で中断していました。 今回は、対策としてヒーターユニット側を適当に加工した後、適当な部材を使用してヒーターコアをしっかり収めていこうと思います。 今回幸いだったのは、購入したヒーターコアが純正よりも「小さかった」ことです。 もし「大きかった」としたら、ヒーターユニットに収めるのは物 ...

続きを読む

ローバーミニ ヒーターコア交換

Mini

ローバーミニ1000 新品ヒーターコア開封→残念

ローバーミニ1000 ヒーターコア洗浄→取替えへ 現在オーバーヒート対策真っ只中の、我が愛車『89年式ローバーミニ 30th 1000』です。 前回、古いヒーターコアを外して内部洗浄を試みたのですが、 どれだけ洗浄し続けても次々に錆が出てくるのに嫌気が差し、 諦めて新品に交換することを決意しました。 購入にあたり、ローバーミニのヒーターコアについて調べてみました。 ローバーミニは数十年間も製造されていたことから、ヒーターコアの形状も年式により違いがあるようです。 大きく分けると3種類あるようで、注文するの ...

続きを読む

ローバーミニ ヒーターユニット ヒーターコア

Mini

ローバーミニ1000 ヒーターコア洗浄→取替えへ

現在オーバーヒート対策真っ只中の、我が愛車『89年式ローバーミニ 30th 1000』 サンポールや専用の洗浄剤を駆使して水路洗浄してみたものの、オーバーヒート気味は収まらず、原因はどうやら電動ファンの不具合っぽいとはいえ、この際なので徹底的に対策するために、ヒーターコアも外して洗浄してみることにしました。 ローバーミニの場合、ヒーターユニットは室内の前方中央の足元に設置されています。 エンジンルームで熱せられた冷却水が、ホースを伝わって室内のヒーターコアに取り込まれ、それにファンで風を当てることで暖かい ...

続きを読む

Mini

ローバーミニ1000 ロアアームブッシュ交換

本日はローバーミニのロアアームブッシュを交換しました。 「古いクルマを手に入れたら、まずはゴム類は全て入れ替えろ」とは良く言われるフレーズで、例えば古いベンツですと「足回り関係のブッシュを総入れ替えするとまるで新車のような乗り心地になる」そうです。 まあ本気で新車の乗り心地を目指すなら、ブッシュ以外にもショックアブソーバーやタイヤも交換する必要があるとは思いますが、最善か無かの時代のベンツはさすがにモノが違いますね。 ベンツほどボディが頑丈じゃないミニでは、ブッシュ交換がどれほど効果が出るのか分かりません ...

続きを読む

ローバーミニ テンションロッドブッシュ

Mini

ローバーミニ1000 テンションロッドブッシュ交換

本日はローバーミニのテンションロッドブッシュを交換しました。 テンションロッドは、フロントサスペンションのロアアーム部分と、グリルの下あたりのサブフレーム部分とを繋いでいる棒状の部品ですが、 サブフレームとの結合部に付けられたブッシュは結構へたりが早いことから、走行時にかなり負荷がかかっている部分でもあります。 このブッシュがへたっていることは以前から知っていたのですが、どうせなら足回り全体をリフレッシュするタイミングで…と思っていたので、先延ばしにしていました。 交換はテンションロッドを外せば簡単に出来 ...

続きを読む

Minimam Life

「3」のゾロ目

理由は分からないけれど、人間は「数字」に何かしらの意味を持たせたり親しみを持つ生き物のようです。 例えば同じ数字が並んでいると嬉しかったり、区切りの良い数字を見つけると驚いたり、自分の中で数字に好き嫌いを付けたりしています。 自動車と数字の関係で言えば、それを一番端的に表しているのはナンバープレートでしょうか。 以前は(裏技もあったにせよ)ナンバープレートの数字を選べるなんて思いもよらなかったものですが、今は車を購入する際には必ず「希望ナンバーはどうしますか?」と聞かれますので時代も変わったものです。 希 ...

続きを読む

ローバーミニ アッパーアーム ベアリング交換

Mini

ローバーミニ1000 アッパーアームのベアリング交換

アッパーアームに異常を感じて取り外してみたところ、内部のベアリングが破損していました。 ベアリングはアッパーアームに押し込んであるだけの構造なので、どこかに引っ掛けて「押す」か「引く」かのどちらかな訳ですが、 いずれにしても僕の手元には専用の工具はありません。 ローバーミニ1000 アッパーアームの取り外しとベアリング破損 僕のミニの場合、少なくともこのような構造のベアリングが、フロントのアッパーアームに2個(左右で4個)とリアのラジアスアームに2個(左右で4個)の計8個はあるので、 長期的にみれば専用工 ...

続きを読む

学校薬剤師 薬物乱用防止講座

学校薬剤師

「学校薬剤師」 本日は薬物乱用防止講座でした

本日は薬物乱用防止講座でした。 危険な薬物についての講演は初めてだったので、事前準備にはいつもより随分と時間をかけた印象です。 保健所から提供される教材で講演すれば簡単ではあるものの、それでは僕の気が済みません。 他の自治体のパンフレットやDVDを探したり、薬物乱用防止系の活動をされている団体のページを眺めたり、YouTubeでも参考となりそうな動画もたくさん見て研究しました。 まあ自業自得というやつですね。 僕の持ち時間は35分。 当初はスライドだけのつもりが、やっぱり子供たちは動画の方が分かりやすいだ ...

続きを読む

学校薬剤師 薬物乱用防止講座 渡辺邦人

学校薬剤師

「学校薬剤師」 薬物乱用防止講座の内容

保健所から依頼のあった薬物乱用防止講座に向け、先日手に入れた岐阜県が作成したパンフレットやDVDに一通り目を通し、僕なりに講座の内容を検討中です。 最近は薬物乱用防止を題材としたインターネットサイトやyoutube動画等、実は教材には事欠かない訳で、 それらを目にすると、確かに他の公共機関や団体が作成した動画の方が分かりやすかも?と思うところもあるので、僕なりに完全オリジナルなものを作成しても良かったのですが、 まあ今回は僕も初めてのことなので、岐阜県から提供された教材(パンフレット+DVD)をメインに、 ...

続きを読む

DUCATI900SS オイル交換

Ducati

DUCATI(ドゥカティ) 900SS 1989年式 プラグとオイルの交換

本日はちょっとした隙間時間を使いDUCATI900SSのメンテナンスをしました。 数年間動いていないエンジンをかけることを目標に作業している僕ですが、まあ慌てたところでろくな目に合わないので、 昔から言われるように、エンジンが動き出す3つの要素【良い混合気、良い圧縮、良い点火】を念頭に根気良く仕上げています。 さて、まずは点火の基本であるプラグです。 手持ちにピッタリ合うものが無くて外せなかったプラグですが、注文しておいたソケットがやっと届きました。 ちなみにサイズは18mm。 純正サイズなのかはよく分か ...

続きを読む

今回はこのようにショートコードを使ったスライドショーの設置と細かな設定方法を解説していきます。

スライドショーの設置方法

今回は固定ページにスライドショーを設置する方法で解説していきますが、投稿ページでも作業は同じです。

1)まずは下に記載してあるショートコードをそのままコピーして下さい。

[st-catgroup cat="" page="" order="" orderby="id" child="on" slide="on" slides_to_show="on" slide_date="off" slide_more="ReadMore"]

2)ワードプレスの管理画面から、固定ページ>新規作成に進みます。

3)固定ページの作成画面が表示されたので、先ほどコピーしたショートコードを貼り付けます。

4)これでスライドショーが設置されているはずなので、プレビュー画面で確認してみて下さい。

スライドショーの設定方法

次に作成したスライドショーの詳細設定をします。
設定方法はとても単純で、ショートコードをそのまま書き換えるだけの作業になります。

例えばショートコード内に【 st-catgroup cat=""  】と書かれた部分がありますが、 ここはスライドショーに表示させたいカテゴリーを設定する場所です。
【 st-catgroup cat="ここの部分"  】 にカテゴリーIDを入力することで、スライドショーに表示させたい記事をカテゴリーで絞り込むことが出来るのです。

このようにショートコードにはそれぞれ意味があり、 ""  の間に数字や文字列等を入れることで、そのショートコードの設定ができるようになっています。

一つ一つ見ていきましょう。

① 【 st-catgroup cat=""  】 の部分

上にも書きましたが、ここは表示させたいカテゴリーを絞り込むところです。
カテゴリーを絞り込まないのであれば何も入力しなくても構いませんが、カテゴリーを絞り込む場合には表示させたいカテゴリーIDを入力してください。

カテゴリーを指定しない場合は何も入力しなくても良い
【 st-catgroup cat=""  】

カテゴリーを指定する場合はIDを入力する
例えば表示させたいカテゴリーのIDが2の場合
【 st-catgroup cat="2"  】

表示させたいカテゴリーが複数の場合は【,】で区切る必要がある
例えば表示させたいカテゴリーIDが2と3と4の場合
【 st-catgroup cat="2,3,4"  】

逆に表示させたくないカテゴリーがある場合は、-(マイナス)で除外する
例えば表示させたいカテゴリーIDが7の場合
【 st-catgroup cat="-7"  】

こんな感じです。

ちなみにカテゴリーIDは、ワードプレスの管理画面から、投稿>カテゴリーと進むと確認できます。

② 【page=""】 の部分

ここはスライドショーに表示させる記事のページ数を指定するところです。

記事数を5つにする場合
【page="5"】

記事数を8つにする場合
【page="8"】

例えば【page="8"】と入力した場合、8つの記事を使ってぐるぐるとスライドショーが開始されます。

③【 order="" 】の部分

ここはスライドショーに表示させる記事の順序をDESC(降順)ASC(昇順)で指定するところです。

スライドショーの記事を新しい順に並べる場合
【 order="desc" 】

スライドショーの記事を古い順に並べる場合
【 order="asc" 】

通常は新しい順に並べると思うので 【 order="desc" 】 で良いと思います。

④ 【 orderby="" 】の部分

ここはスライドショーに表示させる記事の順序を決める際のキーとなる項目を指定するところです。

デフォルトは【id】となっていて、投稿記事のIDによって表示順序が決められますが、その他にも色々な設定ができます。

記事のIDをキーにする場合 ★デフォルト
【 orderby="id" 】

記事のタイトルをキーにする場合
【 orderby="title" 】

記事の日付・時刻をキーにする場合
【 orderby="post_date" 】

ランダムに表示させたい場合
【 orderby="rand" 】

こだわらなければデフォルトで良いと思います。

⑤ child="" の部分

ここはスライドショーに子カテゴリーの表示を指定するところです。

ワードプレスではカテゴリーに階層構造を持たせることができますが、その辺りを使いこなしている方であれば、ここの設定で表示方法をコントロールすることができます。

子カテゴリーを表示させたい場合
child="on"

子カテゴリーを表示させたくない場合
child="off"

⑥【 slide="" 】の部分

ここはスライドショーのオンオフを切り替えるところです。

スライドショー化させたい場合
【 slide="on" 】

スライドショー化させたくない場合
★ただの一覧表示になります
【 slide="off" 】

今回はスライドショー化が目的なので【 slide="on" 】でOKです。

⑦ slides_to_show="" の部分

ここはスライドショー画面の列数(一度に表示させる記事数)を指定できます。

【slides_to_show="3,3,2"】といった感じに3つの数字を並べて指定しますが、これは左から順に「PCのような大画面,タブレットのような中画面,スマホのような小画面」を意味しています。

例えは、PCのような大画面=3列、タブレットのような中画面=3列、スマホのような小画面=2列にしたい場合には
【slides_to_show="3,3,2"】

例えは、PCのような大画面=4列、タブレットのような中画面=4列、スマホのような小画面=3列にしたい場合には
【slides_to_show="4,4,3"】

といった感じに設定します。

⑧ slide_date="" の部分

ここはスライドショーに表示される記事に日付を表示させるかどうかを指定するところです。

日付を表示させたい場合
【 slide_date="on" 】

日付を表示させたくない場合
【 slide_date="off" 】

⑨ slide_more="" の部分

ここはスライドショー内に表示される「ボタンの表示名」を指定するところです。

このボタンをクリックすると記事ページに飛ぶので、「続きを読む」とか「ReadMore」とかで良いと思います。

何も表示させない場合
【 slide_date="" 】

「続きを読む」と表示させたい場合
【 slide_date="続きを読む" 】

「ReadMore」と表示させたい場合
【 slide_date=" ReadMore " 】

まとめ

今回はスライドショーの設置と設定の方法を記事にしてみました。

細かな設定で自分好みのスライドショーを作成し、ホームページに彩りを与えてみて下さい。

-WordPress

Copyright© GOKUI PROJECTS , 2021 All Rights Reserved.