アイキャッチ画像に大きな画像を使ってるブログをよくみますね。 自分のサイトでも大きな画像を使いたい…でもあまり大きな画像を使ってサーバーに負荷を与えるのはちょっと。と、なかなか踏み出せずにいる方もいると思います。 大きな画像を自分のサーバーに置けないなら、外部サーバーの画像を直接呼び出しちゃおう!という提案です。カスタムフィールドを使って実装します。ちなみにこのブログの↑のアイキャッチ画像もPicasaから呼び出しています。

カスタムフィールドを使うわけ

記事本文に記述すれば似たようなことはできますが、もしデザインの変更が入った時に対応がめんどくさいことになります。なので、カスタムフィールドを使って画像のURLを入力するだけで指定できるようにしています。 それに何らかの理由で外部サーバーの画像が消えてしまった場合も、WordPress純正のアイキャッチ画像が表示されるので、記事のトップ画像が404という悲しい出来事もなくなります。

実装サンプル

記事の編集画面に「アイキャッチ画像につかう画像のURL」の項目が追加されます。 記事を保存すればプレビュー プレビュー表示 それでは実際に実装してみましょう。

実装

テンプレートファイルのfunctions.php と記事表示のphp(content.phpあたり)を変更します。

functions.php にコードを追加

functions.phpの適当な場所に以下のコードを追加してください。
add_action('init', 'custom_init');
function custom_init() {
    add_action('save_post', 'add_save_post_custom_eyecatch');
    add_action('admin_menu', 'add_admin_menu_custom_eyecatch_hooks');
}
function add_save_post_custom_eyecatch($post_id) {
    if (!wp_verify_nonce($_POST['custom_eyecatch_noncename'], 'custom-url')) {
    return $post_id;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
    return $post_id;
    }
    $custom_eyecatch = $_POST['custom_eyecatch'];
    update_post_meta($post_id, '_custom_eyecatch', $custom_eyecatch);
}
function add_admin_menu_custom_eyecatch_input() {
    global $post;
    echo '<input type="hidden" name="custom_eyecatch_noncename" id="custom_eyecatch_noncename" value="'.wp_create_nonce('custom-url').'" />';
    echo '<input type="text" name="custom_eyecatch" value="'.get_post_meta($post->ID,'_custom_eyecatch',true).'" id="custom_eyecatch" style="width:100%;"><br><img src="'.get_post_meta($post->ID,'_custom_eyecatch',true).'" style="margin:5px;max-width:320px;height:auto;">';
}
function add_admin_menu_custom_eyecatch_hooks() {
    add_meta_box('custom_eyecatch', 'アイキャッチ画像につかう画像のURL', 'add_admin_menu_custom_eyecatch_input', 'post', 'normal', 'high');
    add_meta_box('custom_eyecatch', 'アイキャッチ画像につかう画像のURL', 'add_admin_menu_custom_eyecatch_input', 'page', 'normal', 'high');
}
これで、記事編集画面に項目が追加されました。 このコードは↓の記事を参考にしました。
WordPressの管理画面をカスタマイズしたい時に覚えておくと重宝しそうなハックやプラグインいろいろ

指定した画像を記事に表示させる。

記事のループ内の任意の場所に以下のコードを追加します。
<?php if($custom_eyecatch = get_post_meta(【記事のID】, '_custom_eyecatch', true)): ?>
<img src="<?php echo $custom_eyecatch; ?>" class="attachment-post-thumbnail wp-post-image" alt="">
<?php elseif(has_post_thumbnail()):?>
<?php the_post_thumbnail(); ?>
<?php endif;?>
1行目でその記事のカスタムフィールドを取得して値があれば2行目へ、なければ3行目でWordPress純正のアイキャッチ画像を取得。もしそれもなければ何も出力しません。 1行目の【記事のID】の部分は get_the_ID() なり、適切変更してください。

まとめと注意点

カスタムフィールドでこんなこともできるんだ。ということで実装してみました。 この方法で外部画像が表示されるのは記事上の表示のみです。 OGPなどで呼び出されるアイキャッチ画像はWordPress純正のアイキャッチ画像で指定したものが使われるので、WordPressのアイキャッチもしっかり指定してくださいね。

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

8 件のコメント

  1. ピンバック: 安定性を求めて、話題のWordPressテーマ「Stinger2」に変更しました | Alternative Color

  2. wordpressを始めたばかりの初心者です。
    自分にはよくわからない単語だらけで、どうかご解説をお願いできますでしょうか。

    「記事のループ内」とは、一体どこのことなのでしょうか?
    宜しくお願いします。

    1. よっしー 投稿作成者

      こんにちは。返信が遅くなってしましました。
      記事のループとは、
      while( have_posts() ) :
      から
      endwhile;
      までの間のことです。

      この間のコードが、そのページで表示される記事の数だけ繰り返しループされます。

  3. 10行目の部分が
    Parse error: syntax error, unexpected ‘;’
    とエラーになってしまいます

    テーマによって違うのでしょうか?

    1. よっしー 投稿作成者

      こんにちは!
      コードの見た目を整形するプラグインを変えたことが影響して、コードの一部がエンティティに変換されていました。

      エンティティ化の例)
      & → &
      > → >
      など。

      同じように変換された箇所が複数あったため、コードを書き直しました。
      お手数ですが、またコピペしてお使いください。
      よろしくお願いいたします。

  4. ピンバック: アイキャッチ画像をPICASAから呼び出す – WordPress

  5. ピンバック: WordPressのアイキャッチ画像に外部サーバの画像を使う方法 | 盛り上がる話のネタ帳