とあるエンジニアの作業ブログ

Web製作

【WordPress】画像URLをショートコード化する

投稿日:2019年1月3日 更新日:

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。

人間カード
無料サンプル
インゴシマ
無料サンプル
うれしょん!
無料サンプル
小倉優香ファースト写真集 ぐらでーしょん
無料サンプル

作業の目的

環境差異の吸収

例えば、localのWordpress環境で作成した投稿を本番のWordpressで公開する場合や、Wordpressサイトのドメインを変更する場合などに、src属性などをフルパスで指定していると、変更後の環境で全ての投稿のsrc属性を置換しなければなりません。URLをショートコード化することで環境差異を吸収し、変更後の環境でも差異なくサイトが表示されるようにします。

可読性、コーディング効率の向上

src属性に指定されるURLはhttp://domain-name/wordpress/hogehogehogeといったように長くなることが普通ですが、ショートコード化することでURLを短くし、可読性、及びコーディング効率を向上させます。

メディア設定の変更

デフォルトではアップロードした画像ファイルのURLは以下のように年月が含まれています。

https://someonesdodo.site/wp-content/uploads/2019/01/hogehoge.png

この年月部分が環境差異の原因になるので、メディア設定を変更して画像アップロード時の保存先の設定を変更します。
設定 > メディアと進み、以下の画像のように「アップロードしたファイルを年月ベースのフォルダに整理」のチェックを外します。

media_config

これでアップロードしたファイルがuploadsディレクトリ直下に保存され、URLから年月が削除されました。

functions.phpにuploadsディレクトリを返すショートコードを追加する

“外観” > ”テーマの編集”と選択し、functions.phpに以下のPHPコードを追加する。

shortcode_getUploadsURLがuploadsディレクトリURLを返すユーザ定義の関数です。このユーザ定義関数をadd_shortcode関数(ショートコードを追加するWordpress標準関数)を使ってiurlというショートコード名で登録します。

ウィジェットでショートコードを使えるようにする

デフォルトではショートコードは投稿と固定ページでしか使えません。
ウィジェットでショートコードを使えるようにするには、以下の記述をfunctions.phpに追加します。

これでウィジェットでもショートコードが使えるようになったので、あとは投稿やウィジェットに記載するimgタグのsrc属性でsrc=[irul]/画像名称.pngと記載すれば画像ファイルにアクセスできます。

-Web製作
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

DMM電子書籍の広告を自動出し分けするショートコード

DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。 ついでに、前に作ったアフィリエイト自動出し分けショートコー …

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …