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

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

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

関連記事

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

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

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

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

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

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …

【Stinger8】gulp-phtml-simple-compでheader.phpをうまく圧縮する

Stinger8のテーマファイルをgulpのgulp-phtml-simple-compを使ってphp圧縮にかけたら、バージョンベクタの圧縮がうまくいかなかったので自分用のメモ。 参考gulp-pht …