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

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

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

関連記事

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

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

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

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

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

GulpでWordPressのCI 〜設計編〜

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

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

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