WordPress 覚えておきたいカスタマイズテクニック22個

覚えておくと便利なWordPressのカスタマイズテクニック22個を紹介します。

1. アップロードしたjpg画像の画質を改善する

WordPressにアップロードした画像は、自動的に圧縮が行われます。この圧縮により、jpgの画質が多少劣化します。jpgの画質を改善するには、functions.phpに次のコードを追加します。

//アップロードしたJPG画像の画質を100%に変更
add_filter('jpeg_quality', function($arg){return 100;});

2. WordPressの自動ログアウトまでの時間を長くする

WordPressの自動ログアウトまでの時間を変更します。functions.phpに次のコードを追加します。単位は「秒」です。

//自動ログアウト時間の変更
add_filter( 'auth_cookie_expiration', 'stay_logged_in' );
  function stay_logged_in( $expire ) {
  return 31536000; // 1年間 60*60*24*365
}

3. 管理画面のロゴをオリジナル画像に変更する

管理画面のWordPressのロゴをオリジナル画像に変更します。functions.phpに次のコードを追加します。画像はテーマのimagesフォルダに「custom-logo.gif」の名前でアップします。

//管理画面ロゴの変更
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
  echo '
  <style type="text/css">
  #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }
  </style>
  ';
}

4. ログイン画面のロゴをオリジナル画像に変更する

WrodPressログイン画面のロゴをオリジナル画像に変更します。functions.phpに次のコードを追加します。画像はテーマのimagesフォルダに「custom-login-logo.gif」の名前でアップします。

function my_custom_login_logo() {
  echo '<style type="text/css">
  h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
  </style>';
}
add_action('login_head', 'my_custom_login_logo');

5. 管理画面のカラーを変更

管理画面のカラーを変更します。functions.phpに次のコードを追加します。

function custom_colors() {
  echo '<style type="text/css">#wphead{background:#069}</style>';
}

add_action('admin_head', 'custom_colors')

6. リビジョンを無効にする

リビジョンは便利な機能ですが、人によっては全く使わなかったり、記事数が多いサイトではデータベースが肥大化して困っている、ということがあると思います。そんな時は、リビジョンの無効化、リビジョン数の制限、リビジョンの自動保存間隔の変更を検討しましょう。

リビジョンを無効にするには、wp-config.phpに次の設定を追加します。最後の行に「require_once(ABSPATH . ‘wp-settings.php’);」のような記述があると思いますが、それよりも前に記述します。

//リビジョンの無効化
define('WP_POST_REVISIONS', false);

7. リビジョン数を制限する

リビジョンに保存される数を制限することができます。wp-config.phpに次の設定を追加します。最後の行に「require_once(ABSPATH . ‘wp-settings.php’);」のような記述があると思いますが、それよりも前に記述します。

//リビジョン数の制限
define('WP_POST_REVISIONS', 10); //10個に制限

8. 自動保存の間隔を変更する

デフォルトでは、60秒ごとに自動保存が行われます。次の設定で、自動保存の間隔を変更することができます。単位は「秒」です。wp-config.phpに次の設定を追加します。最後の行に「require_once(ABSPATH . ‘wp-settings.php’);」のような記述があると思いますが、それよりも前に記述します。

//自動保存間隔の変更
define('AUTOSAVE_INTERVAL', 300); //300秒に変更

9. WordPressの更新通知を非表示にする

クライアントプロジェクトでは、WordPressの更新通知を非表示にしたいというケースがあります。functions.phpに次の設定を追加することで、WordPressの更新通知を非表示にできます。

//WordPress更新通知の非表示
function hide_wp_update_nag() {
  remove_action( 'admin_notices', 'update_nag', 3 ); //画面上部の更新通知を非表示
  remove_filter( 'update_footer', 'core_update_footer' ); //画面下部の更新通知を非表示
}
add_action('admin_menu','hide_wp_update_nag');

さらに、WordPressのバージョンチェック自体も不要という場合には、以下のコードも追記します。

//WordPressバージョンチェックの停止
add_filter('pre_site_transient_update_core', create_function('$a', "return null;")); //WordPress本体のバージョンチェックを停止
add_filter('pre_site_transient_update_plugins', create_function('$a', "return null;")); //プラグインのバージョンチェックを停止

10. 特定のプラグインの更新通知を非表示にする

特定のプラグインの更新通知を非表示にするには、functions.phpに次のコードを追加します。

//特定のプラグインの更新通知を非表示にする
add_filter('site_option__site_transient_update_plugins', 'filter_hide_update_notice');
function filter_hide_update_notice($data) {
    if (isset($data->response['プラグインのメインファイルまでのファイルパス（wp-contents/plugins からの相対パス）'])) {
    unset($data->response['プラグインのメインファイルまでのファイルパス（wp-contents/plugins からの相対パス）']);
  }
}

参考: 【WordPress】本体やプラグインの更新の通知を非表示にする at softelメモ

11. WordPressテーマの更新を停止する

一般公開されているWordPressテーマを使用していると、テーマの新しいバージョンがリリースされることがあります。テーマのファイルを直接編集している場合、テーマを更新すると、手動で編集した箇所が全て消えてしまうリスクがあります。テーマの更新を停止するには、functions.phpに次の設定を追加します。

//WordPressテーマ更新の停止
add_filter('pre_site_transient_update_themes', create_function('$a', "return null;")); //テーマの更新を停止

12. 管理画面の投稿一覧に任意の項目を追加する

管理画面の投稿一覧ページに任意の項目を表示します。

functions.phpに次のコードを追加します。サンプルでは、記事のサムネイル画像、ID、スラッグ（記事のURLの一部）、文字数を表示しています。

//管理画面 投稿一覧に任意の項目を表示
function add_posts_columns($columns) {
  $columns['thumbnail'] = 'サムネイル';
  $columns['postid'] = 'ID';
  $columns['slug'] = 'スラッグ';
  $columns['count'] = '文字数';

  echo '<style type="text/css">
  .fixed .column-thumbnail {width: 120px;}
  .fixed .column-postid {width: 2%;}
  .fixed .column-slug, .fixed .column-count {width: 5%;}
  </style>';

  return $columns;
}
function add_posts_columns_row($column_name, $post_id) {
  if ( 'thumbnail' == $column_name ) {
    $thumb = get_the_post_thumbnail($post_id, array(100,100), 'thumbnail');
    echo ( $thumb ) ? $thumb : '－';
  } elseif ( 'postid' == $column_name ) {
    echo $post_id;
  } elseif ( 'slug' == $column_name ) {
    $slug = get_post($post_id) -> post_name;
    echo $slug;
  } elseif ( 'count' == $column_name ) {
    $count = mb_strlen(strip_tags(get_post_field('post_content', $post_id)));
    echo $count;
  }
}
add_filter( 'manage_posts_columns', 'add_posts_columns' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_row', 10, 2 );

参考: WordPress：投稿一覧にサムネイル・ID・スラッグ・文字数の項目を追加する方法 | NxWorld

13.管理画面の投稿一覧に投稿ユーザーで絞り込む機能を実装する

複数人でWordPressを運用している場合、投稿一覧ページで記事をユーザーで投稿を絞り込めると便利です。functions.phpに次のコードを追加します。

//投稿一覧にユーザー絞り込み機能の追加
function add_author_filter() {
  global $post_type;
  if ( $post_type == 'post' ) {
    wp_dropdown_users( array('show_option_all' => 'すべてのユーザー', 'name' => 'author') );
  }
}
add_action( 'restrict_manage_posts', 'add_author_filter' );

14. 管理画面の投稿一覧で記事のステータスによって背景色を変更する

大量の記事を複数人で運用している場合、公開済み、公開予約、下書きなど、記事のステータスが簡単に把握できると便利です。投稿一覧画面で記事のステータスによって背景色を変更するには、functions.phpに次のコードを追加します。

//投稿一覧の背景色変更
function change_post_status_background_color() {
?>
<style type="text/css">
  /* 公開済 */
  .status-publish { background-color: #3498db;}

  /* 下書き */
  .status-draft { background-color: #1abc9c;}

  /* 非公開 */
  .status-private { background-color: #9b59b6;}

  /* レビュー待ち */
  .status-pending { background-color: #f1c40f;}

  /* パスワード保護 */
  .post-password-required { background-color: #f39c12;}

  /* 予約投稿 */
  .status-future { background-color: #e74c3c;}
</style>
<?php }
add_action( 'admin_head', 'change_post_status_background_color' );

参考： WordPress：投稿一覧で記事ステータス毎に背景色を変更する方法 | NxWorld

15. 投稿画面でタイトルやカテゴリー、アイキャッチ画像を入力必須にする

投稿画面でタイトル、コンテンツ、抜粋、カテゴリー、タグ、アイキャッチ画像の入力を必須にします。functions.phpに次のコードを追加します。

//投稿画面に必須項目の設定
add_action( 'admin_head-post-new.php', 'post_edit_required' );
add_action( 'admin_head-post.php', 'post_edit_required' );
function post_edit_required() {
?>
<script type="text/javascript">
jQuery(function($) {
	if( 'post' == $('#post_type').val() || 'page' == $('#post_type').val() ) {
		$('#post').submit(function(e) {
			// タイトル
			if( '' == $('#title').val() ) {
				alert('タイトルを入力してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				$('#title').focus();
				return false;
			}
			// コンテンツ（エディタ）
			if( $('.wp-editor-area').val().length < 1 ) {
				alert('コンテンツを入力してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				return false;
			}
			// 抜粋
			if( '' == $('#excerpt').val() ) {
				alert('抜粋を入力してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				$('#excerpt').focus();
				return false;
			}
			// カテゴリー
			if( $('#taxonomy-category input:checked').length < 1 ) {
				alert('カテゴリーを選択してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				$('#taxonomy-category a[href="#category-all"]').focus();
				return false;
			}
			// タグ
			if( $('#tagsdiv-post_tag .tagchecklist span').length < 1 ) {
				alert('タグを選択してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				$('#new-tag-post_tag').focus();
				return false;
			}
			// アイキャッチ
			if( $('#set-post-thumbnail img').length < 1 ) {
				alert('アイキャッチ画像を設定してください');
				$('.spinner').css('visibility', 'hidden');
				$('#publish').removeClass('button-primary-disabled');
				$('#set-post-thumbnail').focus();
				return false;
			}
		});
	}
});
</script>
<?php
}

参考: WordPress：投稿画面でタイトル、コンテンツ、カテゴリー選択、アイキャッチなどを入力必須にする方法 | NxWorld

16. 抜粋に入力できる文字数を制限する

抜粋に入力できる文字数を制限します。functions.phpに次のコードを追加します。文字数は、「var count = 100;」の部分を変更します。

function excerpt_count() {
?>
<script>
	(function($) {
		var count = 100; //100文字
		$('#postexcerpt .hndle span').after('<span style=\"padding-left:1em; color:#888; font-size:12px;\">現在の文字数： <span id=\"excerpt-count\"></span> / '+ count +'</span>');
		$('#excerpt-count').text($('#excerpt').val().length);
		$('#excerpt').keyup(function() {
			$('#excerpt-count').text($('#excerpt').val().length);
			if ( $(this).val().length > count ){
				$(this).val($(this).val().substr(0, count));
			}
		});
		$('#postexcerpt .inside p').html('※ここには <strong>"'+ count +'文字"</strong> 以上は入力できません。').css('color', '#888');
	}(jQuery));
</script>
<?php
}
add_action( 'admin_footer-post-new.php', 'excerpt_count' );
add_action( 'admin_footer-post.php', 'excerpt_count' );

参考： WordPress：入力文字数の制限や補足文の追加など、管理画面の抜粋入力欄周りをカスタマイズする方法 | NxWorld

17. ユーザーのプロフィールに任意の項目を追加する

ユーザーのプロフィールに任意の項目を追加することができます。会員サイトを作成するときや、投稿に著者プロフィールを詳しく表示したい場合などに便利です。functions.phpに次のコードを追加します。

//ユーザーのプロフィール項目の追加
function my_user_meta($x)
{
  //項目の削除
  unset($x['aim']);
  unset($x['jabber']);
  unset($x['yim']);

  //項目の追加
  $x['twitter'] = 'twitter';
  $x['facebook'] = 'facebook';
  $x['phone'] = '電話';
  $x['address'] = '住所';

  return $x;
}
add_filter('user_contactmethods', 'my_user_meta', 10, 1);

参考: 【WordPress】ユーザーのプロフィールの項目をカスタマイズする at softelメモ

18. 不要なRSSフィードを削除する

WordPressが自動で出力するRSSには、記事本体のRSS以外に、コメントのRSS、カテゴリのRSSなどがあります。メインとなる記事本体のRSS以外不要な場合は、次のコードをfunctions.phpに追加することで、不要なRSSフィードを出力しないようにすることができます。

remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'feed_links_extra', 3 );

参考: WordPress Optimization Guide – Things To Do After Installing WordPress

19. Jetpack「人気の投稿とページ」の集計期間を変更する

WordPresプラグインのJetpackには、「人気の投稿とページ」をアクセス数に基づいて自動表示するというウィジェットがあります。デフォルトでは、アクセス数の集計期間が24時間～48時間になっていますが、この期間を変更することができます。

functions.phpに次のコードを追加します。単位は「日」です。「return ‘7’;」の部分を変更します。

//jetpack「人気の投稿とページ」集計期間の変更
function jetpackme_top_posts_timeframe() {
  return '7'; //7日に変更
}
add_filter( 'jetpack_top_posts_days', 'jetpackme_top_posts_timeframe' );

20. Jetpack「人気の投稿とページ」の前後に任意の項目を出力する

Jetpack「人気の投稿とページ」で出力される各投稿の前後に、任意の項目を表示することができます。functions.phpに次のコードを追加します。

サンプルコードでは、投稿の後に、投稿の日付を表示しています。

//jetpack「人気の投稿とページ」の後に、任意の項目を表示
function jetpackme_add_date_top_posts( $post_id ) {
  $post_date = get_post_time(
    get_option( 'date_format' ),
    true,
    $post_id,
    true
  );
  printf( '<div class="top_posts_date">%s</div>', $post_date );
}
add_action( 'jetpack_widget_top_posts_after_post', 'jetpackme_add_date_top_posts' );

参考

21. Jetpackが出力するog:image「blank.jpg」をオリジナル画像に変更する

Jetpackが出力するog:imageは、画像がない記事やトップページでは「blanck.jpg」が出力されます。これをオリジナルの画像に変更するには、functions.phpに次のコードを追加します。「http://www.sample.com/ogimage.png」の部分を表示したい画像のURLに変更します。

//Jetpackが出力するog:image「blank.jpg」をオリジナル画像に変更
function add_default_image( $tags ) {
  // replace blank Jetpack default image with site header
  if ( substr($tags['og:image'], -9) == "blank.jpg" ) {
    // jetpackでブランク画像が指定されていたとき
    unset( $tags['og:image'] );
    // 表示したい画像のURLを指定する
   $tags['og:image'] = 'http://www.sample.com/ogimage.png';
  }
 
  // always remove useless HTTPS image tags
  unset( $tags['og:image:secure_url'] );
 
  return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );

参考；【改訂版】JetpackのOGPのimageがブランクのときはサイトのロゴに | RYUS blog

22. データベースのパフォーマンスを調査する

次のタグをテーマのテンプレートの好きな位置に組み込んで、サイトを表示します。サイトが表示される際の、クエリの回数（データベースへのアクセス数）と、HTMLなど必要なファイルへの変換にかかった時間（秒）が分かります。

//データベースパフォーマンスの調査
<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?>