開発

[WordPress] メディアにカスタムフィールドを追加して、captionショートコード呼び出しの際に処理させる(メモ)


参考サイト:
メディア(画像)にカスタムフィールドを追加する方法です。メディアと言っても、「attachment」というカスタム投稿の1つであると考えれば臆することも無いです。
http://yahss.net/wordpress/955-curstom-field-on-media-uploader/

メディア(画像)を表示させる際に実行されるフックが見当たらなかったので(本文には直書きされているからそれもそうか)、キャプションを追加する際にショートコードで処理させるので、その際に一緒にカスタムフィールドの中身を表示させることにしました。

画像キャプション回りのHTMLタグをカスタマイズする – WordPressカスタマイズ、サイト作成メモ

画像にキャプションを入れると、WordPressは画像タグを タグで囲み、キャプションを タグで囲んで、それらを でくくって、さらにstyle属性で「画像+10px」の横幅を指定してしまいます。こういうソースですね。 これは画像が120pxの例です。このwidth属性でレイアウトの自由度が損なわれるので、この指定を削除する、あるいは任意のclassを追加する、といったカスタマイズ法です。ソースコードはいじらず、function.phpへの記述追加で可能です。 このHTMLタグを吐き出しているのは、 wp-include内のmedia.php です。Ver3.51のmedia.phpでは654行目に return ‘ ‘ という記述があり、ここで取得した画像の横幅$widthに10を加えてstyleのwidthとして入れています。 ですのでこの行を書き換えれば出力されるタグも変更できますが、やはりコアファイルはいじりたくないものです。WPのバージョンアップのたびに書き直さないとなりませんし。 こういう出力ソースを変更したい場合は、たいがいフィルターで処理するのですが、ここはショートコードで処理されています。ショートコードは自分でPHPソースなどを文中に挿入するときなどに使うもので、ユーザーが作成するものと思いがちですが、WPのデフォルトでいくつか(4つと以前聞きました)仕込まれているショートコードもあり、このキャプション回りもその一つです。 ですのでフィルターではうまく処理ができませんでした(もちろん私の技術力不足の可能性も大ですが)。そこで、ショートコードを加えているなら、オリジナルのショートコードを作成して、それを好きな出力設定に変更して適応させる、という方法にしてみたらうまくいきました。 そのやり方ですが、media.phpでは、まず add_shortcode(‘caption’, ‘img_caption_shortcode’); で img_caption_shortcode というショートコードを caption に適応させていることがわかります(610行目)。この行をコピーしてfunction.phpにペースとして、ショートコード名をオリジナルに変更します。 add_shortcode(‘caption’, ‘my_img_caption_shortcode’); のように、 my_img_caption_shortcode を適応させるようにします(名称は任意です)。 そして、media.phpの628行目から始まるimg_caption_shortcodeの中身を626行目まで丸ごとコピーして、これもfunction.phpにペースト。 そして、まずfunction名の「img_caption_shortcode」を、自分が付けた新しい名前(今の例ではmy_img_caption_shortcode)に変更して、あとは自分が出力したいように中身を書き換えればOKです。基本的には最後の return 以降の部分の書き換えになると思います。私はstyel属性を削除したかったので、こんなふうにその部分を除いたソースにしました。 function my_img_caption_shortcode($attr, $content = null) { if ( ! isset( $attr[‘caption’] ) ) { if ( preg_match( ‘#((?: ]+>s*)?


上記記事を参考に、wp-include/media.phpの中からcaptionショートコードに関する箇所を取り出して、functions.phpに名前を変えて保存します。

キャプションのショートコードを処理する際に、どうやって投稿のIDを取り出すのが簡単かな、と思いましたが、キャプションショートコードを追加すると自動で「id=”atacchment_***”」というアトリビュートが追加されるので、

$media_id = preg_replace("/[^0-9]+/", "", $atts['id']);

としてやれば、IDだけを取り出せるので、後はこのID経由でカスタムフィールドの中身を取り出してやればOKです。

ただ、何となく処理が重たくなった気がするので、その辺を改善しないといけないかな、と思います。media.phpの中にあるキャプションショートコードの処理を停止させる必要があるかもしれません。

追記:
ショートコードを削除する際は、functions.phpに

remove_shortcode('wp_caption', 'img_caption_shortcode');
remove_shortcode('caption', 'img_caption_shortcode');

とすれば、削除されます。
この記事も参考になります。

使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法

Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね!でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。 私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません(おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです)。 また、個人的な Webサイトの時は、テーマの中にそのまま タグを書いて、画像を出力しちゃえばいいのですが、クライアントさんに納品する場合は、画像の追加などが簡単にできないと困ります …。 今回は管理画面から簡単に画像の追加ができて、jQuery などのプラグインでも使えるギャラリーをご紹介します! 実は WordPress のデフォルトのギャラリーを使ってます WordPress のデフォルトギャラリーの使い方 WordPressのデフォルトのギャラリーの困ったところ ショートコードのパラメータ 画像のリンク先について リストで出力させたり、スタイルシートを変更する jQuery のプラグインと組み合わせたりいろいろできます 追記:WordPress で Gallerific を使う方法 WordPress には、Ver2.5 以降から、デフォルトでギャラリー機能がついています。デフォルトのギャラリー機能は、記事やページごとにギャラリーを作れるし、画像の表示順序、タイトルやキャプション、説明まで書けるので、機能的には申し分ありません。でも実際は、デフォルトのままだとなかなかカスタマイズしにくいギャラリーだったりします。 デフォルトのギャラリーの使いにくい部分を改良して、使い易くする前に、ギャラリー機能をまだ知らないよーという人のために簡単にご紹介しますね。 ギャラリーの作り方はとっても簡単です。投稿画面のいつも画像をアップロードしているボタン、 アップロード/挿入 を押して画像をアップロードします。 また、画像のアップロードは一枚ずつじゃなくても、一度にできるので、ギャラリー作りも効率的! 画像をアップロードすると、メディアを追加画面に、 ギャラリー というタブが出現します。 画像一枚一枚には、 タイトルや キャプション、 説明 を加える事もできます。この画面は見慣れてますよね! タイトルなどを一通り書き終わったら、 ギャラリー設定をチェックして、 ギャラリーを挿入ボタンを押せば OK です。または投稿画面に、直接[ gallery] (半角スペースは削除してくださいね。)とショートコードを書くこともできます。 簡単に作れるWordPressのデフォルトのギャラリーですが、このままだといろいろ困った?ことがあります。どこが困るかと言うと …


タグ: WordPress

コメントを残す