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

Web製作

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

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

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

もっとマワして・裏回覧板 デジタルモザイク版
無料サンプル
賭ケグルイ
無料サンプル
magnetic G 橋本マナミ complete
無料サンプル
火遊び
無料サンプル

作業の目的

環境差異の吸収

例えば、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

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

関連記事

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …

STINGER8で初めての投稿の準備をする

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。 目次 前提 アウトプットイメージの確認 投稿の基本形を考える ソースコードをブログ上に表示させるための準備 …

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …

GulpでWordPressのCI 〜実装編〜

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

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …