前回 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 をアップデートすると、この修正は消えてしまいますので、必ずローカル環境にもバックアップを取っておいてください。
前の記事はこちらです。
電子機器が大好きです。
プログラムを書くのをお仕事としていたこともあるので、両方できる PIC や Arduino を使って、いろいろな(役にあんまり立たない)ものを作っています。
実は UNIX 関連のお仕事も長かったので、Raspberry Pi もお手の物なのですけれど、これから触る機会が多くなるのかなぁ。
ボチボチ行きますが、お付き合いください。
若いころの写真なので、現時点では、まだ髪の毛は黒くてありますが、お髭は真っ白になりました。
愛車の国鉄特急カラーのカスタムしたリトルカブで、時々、秋月電子通商の八潮店に出没します。