WordPressではCSSファイルを更新したのにブラウザには反映されない、という事がよくあります。原因はブラウザのキャッシュ機能が古いCSSファイルを読みに行っているので、「スーパーリロード」をする事で解決は出来ますが、CSSファイル名を変更すれば「スーパーリロード」を同じようにブラウザは最新のファイルを読みに行ってくれます。
ただ、毎回ファイル名を変更するのは大変なので、CSSファイルを保存する度に自動的に元のファイル名の後ろに更新日時のタイムスタンプを付けるようにすれば、更新の度にキャッシュクリアする必要が無くなり便利です。
filemtime
ファイルの最終更新日時をUnixタイムスタンプで取得できる関数です。
テーマ直下にcssファイルがある場合
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>?<?php echo filemtime( get_stylesheet_directory().'/style.css'); ?>">
フォルダにcssファイルが入っている場合
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/main.css?<?php echo filemtime(get_stylesheet_directory().'/css/main.css'); ?>">
CSSやJSをfunctions.phpで呼び出す
もちろん今まで通りlinkタグを直接書き込む方法も可能ですが、この方法はwordpressでは非推奨になっています。functions.phpで複数のcssファイルを一元的に管理した方がメリットが大きいのでlinkタグを使わずに、CSSファイルをfunctions.phpで呼び出します。その際にcssファイルにパラメータを付けて、キャッシュをクリアする。
※header.phpのheadタグ内に「wp_head()」を設置することで自動的に適切なタグが生成されます。
さらにjQuery本体と自身の作成したjsファイルも基本的にはfunctions.phpで呼び出す事が推奨されています。
テーマ直下にcssファイルがある場合
functions.php
//cssとjsファイルの読み込み
function my_enqueue_scripts(){
//cssファイルの読み込み
wp_enqueue_style('style', get_stylesheet_directory_uri().'/style.css',false, filemtime(get_stylesheet_directory().'/style.css'));
//jQuery本体の読み込み
wp_enqueue_script('jquery');
//script.jsの読み込み
wp_enqueue_script('script', get_stylesheet_directory_uri().'/js/script.js',false, filemtime(get_stylesheet_directory().'/js/script.js'), true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
投稿記事のアイキャッチ画像を表示させる
オリジナルテーマの場合、まずはfunctions.phpにアイキャッチ画像を表示する為の設定が必要です。
functions.php
// すべてのアイキャッチ画像の有効化
add_theme_support('post-thumbnails');
デフォルトのアイキャッチ画像を指定する
投稿データでアイキャッチ画像を指定する事でアイキャッチ画像を表示させる事は出来ますが、この場合、すべての投稿データにアイキャッチ画像を登録する必要があります。
場合によっては、アイキャッチ画像が無い投稿データもあるので、そういう場合でもデフォルトのアイキャッチ画像を設定しておけば、アイキャッチ画像を表示させられます。
functions.php
function set_default_thumbnail_image ( $html ) {
if ( "" === $html ) {
$html = '<img src="' . get_template_directory_uri() . '/img/noImage.jpg" alt="デフォルトのアイキャッチ画像" />';
}
return $html;
}
add_filter( 'post_thumbnail_html', 'set_default_thumbnail_image' );
