WordPress:サムネイル表示のためのショートコード

ウオトミズ(UOTOMIZU)の中の人

需要があるか分からないけれど、サムネイル表示のためのショートコード。

画像用のショートコードを作成するメリット

  • 元のコードをいじれば一斉に画像を変更できる。
  • 特定のクラスを付与できる。

元の画像をいじれば一斉に画像を変更できる

ショートコードで指定する画像のURLを変えれば、一斉に変更できる。例えば仮のサムネイルを記事に表示させていて、完成したサムネイルに差し替えたい場合、過去の記事を遡って全て変更するのは面倒だし、モレも出てくる。あらかじめ作成したショートコードを使っていれば、画像を変更したい時に一斉に変更できるので便利。

 

特定のクラスを付与できる。

トップの画像にのみデザインを変更したい場合(例:box-shadowをつけるとか)、ショートコードを作成してclass属性を付与しておくと、いちいち【ビジュアル】と【テキスト】を切り替えてコードを書かなくても、画像を指定するだけで良いので便利。

他にも、記事のアイキャッチ画像に最初に表示される画像を使うことが多いと思う。RSSリーダーのFeedlyでは記事リストに表示するアイキャッチを記事内の画像から自動で取得する。だけどclass属性にwebfeedsFeaturedVisualを持つ画像がある場合、そちらを表示するようになる。毎度毎度、Feedlyのクラスをつけるのは面倒だというときは、コードにFeedly用のクラスを付与しておくと便利。

 

ショートコードの仕様

  • url属性の値が空の場合、デフォルト画像の表示
  • url属性に値(オリジナル画像のパス)があれば、オリジナル画像を表示
  • alt属性も指定できる

実際のコード

  • webfeedsFeaturedVisualはFeedly向けのクラス

 

結果

投稿画面にて[thumbnail]と記入するだけで、以下のコードが出力される。

index.php


<img class="thumbnail webfeedsFeaturedVisual" src="https://example.com/default-img" alt="記事のサムネイル">

投稿画面にて[thumbnail utl=”https://example.com/original-img” alt=”オリジナル画像”]と記入すれば以下のコードが出力される。

index.php


<img class="thumbnail webfeedsFeaturedVisual" src="https://example.com/original-img" alt="オリジナル画像">

 

こちらの記事もどうぞ

WordPressのRSSファイルの最適化についてはこちらの記事。

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO