ピックワールド(PIC World)

インフォメーション

この記事は 2014年10月03日 に以下のカテゴリに投稿されました Wordpress Tips.

この記事のタグ

, , , , ,


WordPress Tips : Jetpack の minileven でアイキャッチ画像の大きさを変更する

前回 Jetpack の minileven でアイキャッチを表示する の記事では、Wordpress と Jetpack を使い、スマートフォンサイトを構築し、アイキャッチ画像を表示する方法を紹介しました。

今回は、そのアイキャッチ画像の大きさを変更する方法を紹介します。

アイキャッチ画像は、管理メニューの 設定 -> メディア で表示される サムネイルのサイズ で指定した大きさの画像を使用しています。

従って、他に何も影響を及ぼす事がなければ、こちらで指定するサイズを変更すればよいです。

しかし、ここで指定した大きさがスマートフォンに対し適切なものであればよいのですが、他で使用しているなどの問題で、大きさが変更出来ない場合もあるかと思います。

今回紹介するのは、その場合の対処方法です。

使用するのは、PC 用のテーマファイルに用意されている

function.php

スマートフォンサイトに用意されている、

content.php

です。

この2つのファイルに追記するだけで、スマートフォンサイトで使われるアイキャッチ画像の大きさが変更出来ます。

なお、スマートフォンサイト用のテーマ(minileven) は、サイトの以下のディレクトリにあります。

/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven

管理ツールからは編集する事が出来ませんので、あらかじめ FTP 等で転送し、編集できる状態にしておきます。今使っている 用のテーマにある function.php は管理ツールから編集できます。

まずは function.php のカスタマイズから

管理ツールの 外観 -> テーマ編集 をクリックします。

画面の右側にテーマで使用しているファイルが列記されていると思いますので、この中から function.php を選びます。

少し下にスクロールすると

// ====================================
// = WordPress 2.9+ Thumbnail Support =
// ====================================
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 155, 110, true ); // 305 pixels wide by 380 pixels tall, set last parameter to true for hard crop mode
add_image_size( 'one', 155, 110, true ); // Set thumbnail size
add_image_size( 'two', 350, 248, true ); // Set thumbnail size
add_image_size( 'big', 546, 387, true ); // Set thumbnail size

こんな記述を見つけてください。(ソースコードを抜き出しているので行番号は異なります)

ここが先に紹介した 設定 -> メディア で行う各種の画像サイズの指定を格納してる場所です。

ここのスマートフォン用のアイキャッチ画像のサイズとそれを指定する際の名前を追記します。

// ====================================
// = WordPress 2.9+ Thumbnail Support =
// ====================================
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 155, 110, true ); // 305 pixels wide by 380 pixels tall, set last parameter to true for hard crop mode
add_image_size( 'one', 155, 110, true ); // Set thumbnail size
add_image_size( 'sp-thumbnail', 280, 205, true ); // Set thumbnail size for smartphone
add_image_size( 'two', 350, 248, true ); // Set thumbnail size
add_image_size( 'big', 546, 387, true ); // Set thumbnail size

こんな感じです。上記は指定する名前を ‘sp-thumbnail’ とし、サイズは 280 x 205 とした例です。

編集が終わったら、ファイルを書き込みます。

次にスマートフォン用のテーマファイルにある content.php を修正します。

既にアイキャッチ画像が表示されているのであれば、content.php を開くとファイルの最初の方に

<div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'jetpack' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="<?php the_ID(); ?>" class="minileven-featured-thumbnail"><?php the_post_thumbnail(); ?></a>
</div><!-- .entry-thumbnail -->

こんな記述があると思います。

先の記事で紹介した Mobile Theme Featured images for Jetpack のプラグインがインストールされていないと、この記述はありません。

下記のように修正します。

<div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'jetpack' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="<?php the_ID(); ?>" class="minileven-featured-thumbnail"><?php the_post_thumbnail('sp-thumbnail'); ?></a>
</div><!-- .entry-thumbnail -->

the_post_thumbnail(); ->  the_post_thumbnail(‘sp-thumbnail’);

このように function.php で新しく作ったスマートフォン用のサムネイルの名前を指定するようにカスタマイズします。

修正した content.php は念のためオリジナル版をリネームし残しておき、カスタマイズしたものを content.php としてサイトに FTP すると良いでしょう。
問題が起きればすぐに元に戻せます。

この方法だと、次回の投稿時からアップロードした画像のサイズが上記で指定したサイズのものが加わり、アイキャッチ画像はそのサイズとなります。

スマートフォンでサイトを確認して、画像サイズが適切になったか確認してカスタマイズは終了です。

Jetpack をアップデートすると、この修正は消えてしまいますので、必ずローカル環境にもバックアップを取っておいてください。

前の記事はこちらです。

 

 


One Comment

  1. […] その構築方法は、以前にもこちらの記事やこちらの記事で紹介させていただきました。 […]

コメントを残す

最近の投稿

最近のコメント

アーカイブ