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

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で初めての投稿の準備をする

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

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

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

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

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …