WordPressはカスタマイズ性の高いCMSです。CMSとしての歴史も長く、ネット上では数多くのノウハウが紹介されてます。またチュートリアルも充実しておりWordPress初心者の方でも理解しやすく、PHPを使うプログラマーにも人気があります。僕も数多くのクライアントワークでWordPressをカスタマイズしてきました。今回は中でもカスタマイズ初心者が知っておくと便利なテクニックをご紹介します。
目次
１ 絵文字対応のスクリプトを無効化
WordPress4.2から追記された絵文字用のJavaScriptとCSSを無効化するコードです。絵文字を使わないのであれば、削除しても問題ありません。不要なコードを消してソースコードを綺麗にしておくのもコーダーやプログラマーの役目ではないでしょうか。
|
1 2 3 4 5 6 7 |
<?php remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'wp_head', 'rest_output_link_wp_head'); remove_action( 'wp_head', 'wp_oembed_add_discovery_links'); remove_action( 'wp_head', 'wp_oembed_add_host_js'); ?> |
補足ですが、お使いのWordPressのヴァージョンやEditURI、WindowsLiveWriteRmanifestなど、ヘッダーに書き出される不要なメタ情報を無効化することもできます。
|
1 2 3 4 5 6 |
<?php remove_action('wp_head', 'wp_generator'); // WordPressバージョン表記を消す remove_action('wp_head', 'rsd_link'); // EditURIを消す remove_action('wp_head', 'wlwmanifest_link'); // WindowsLiveWriterManifestを消す remove_action('wp_head', 'wp_shortlink_wp_head'); // 個別記事用の短縮リンクを消す ?> |
２ 固定ページで親ページのIDを取得する
現在表示しているページの直上の親ページの記事IDを取得する関数です。使い方は、function.php に以下コードを埋め込み header.php や page.php から $id = get_parent_page_id( $post ) を呼び出すと $id に 直上の親ページの記事IDが代入されます。
|
1 2 3 4 5 6 7 8 |
<?php function get_parent_page_id( $post = false ){ $parent_id = $post->post_parent; if( $parent_id ) $new_id = get_page( $parent_id )->ID; else $new_id = $post->ID; return $new_id; } ?> |
３ 固定ページで親ページの要素をすべて取得する
上記「２ 固定ページで親ページのIDを取得する」と合わせて使うと効果的な関数です。$id には親ページの記事IDをセットして使います。例えば、タイトルタグやパンくず、子ページで親ページのタイトルを取得するなどの場面で使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php function get_parent_pages_result( $id = null ) { global $wp_query,$post_type; if( empty($id) ) $id = $wp_query->queried_object->ID; $defaults = array( 'include' => $id , 'depth' => 0, 'child_of' => 0, ); $r = wp_parse_args( $args, $defaults ); extract( $r, EXTR_SKIP ); $pages = get_pages($r); $output = ''; $output["ID"] = $pages["0"]->ID; $output["post_title"] = $pages["0"]->post_title; $output["post_parent"] = $pages["0"]->post_parent; $output["href"] = walk_page_tree($pages, $r['depth'], $current_page, $r); $output["post_name"] = $pages["0"]->post_name; $output["post_excerpt"] = $pages["0"]->post_excerpt; return $output; } ?> |
以下のようにコードを組み立てることで、現在表示しているページの直上の親ページの情報を配列で取得することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $id = get_parent_page_id( $post ); $result = get_parent_pages_result( $id ); // 例）取得した $result の情報 /* $result = array( 'ID' => 1, 'post_title' => 親ページのタイトル, 'post_parent' => 0, 'href' => <li class="page_item page-item-5"><a href="http://xxxxx/parent/">親ページのタイトル</a></li>, 'post_name' => service, 'post_excerpt' => 抜粋の内容が入ります。 ); */ ?> |
４ 投稿画面のカテゴリのソート順を固定する
投稿画面で入れ子になったカテゴリ選択ボックスの階層を保つ方法です。クライアントからお問い合わせをいただくことが多いので、事前に対応しておくといいでしょう。詳しくはこちらの記事で解説しています。
|
1 2 3 4 5 6 7 8 9 |
<?php function terms_checklist_args( $args, $post_id ){ if ( $args['checked_ontop'] !== false ){ $args['checked_ontop'] = false; } return $args; } add_filter('wp_terms_checklist_args', 'terms_checklist_args',10,2); ?> |
５ 投稿タイプごとに表示件数を変える
アーカイブページなど、投稿タイプごとに１ページで表示させる件数をまとめて調整する時に有効な方法です。テーマファイルのループ前で「query_posts」関数を呼び出して表示件数を強制的に書き換える方法をよく見かけますが「$query->set()」を使うほうがスマートです。
詳しくはこちらの記事で解説しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php function customize_main_query($query) { if ( is_admin() || ! $query->is_main_query() ) return; // ニュースアーカイブページの場合 if ( $query->is_post_type_archive( 'news' ) ) { $query->set( 'posts_per_page', '5' ); } // タクソノミーアーカイブページの場合 if ( $query->is_tax( array('info') )) { $query->set( 'posts_per_page', '10' ); } } add_action( 'pre_get_posts', 'customize_main_query' ); ?> |
６ アイキャッチ画像をサイズ指定して表示する
アーカイブページやシングルページで、投稿されたアイキャッチ画像を表示します。
|
1 2 3 4 5 6 |
<?php if ( has_post_thumbnail() ) { $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large'); $image = '<figure><img src="'.$image_url[0].'" alt="" /></figure>'; } ?> |
３行目 wp_get_attachment_image_src() の引数に「large」や「medium」をセットすることで取得する画像サイズを指定することができます。wp_get_attachment_image_src()の使い方については、こちらの記事で解説しています。
■引数に渡せる画像のサイズ
| サムネイル | thumbnail |
|---|---|
| 中サイズ | medium |
| 大サイズ | large |
| フルサイズ | full |
７ サムネイル画像のサイズ選択肢を増やす
WordPressで画像をアップロードすると、サムネイル、中サイズ、大サイズ、フルサイズの４種類の画像が同時に作られますが、サイズが4つでは足りないときに画像のサイズ・種類を増やすことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php function add_custom_image_sizes() { global $my_custom_image_sizes; $my_custom_image_sizes = array( 'new-Large' => array( 'name' => 'ワイド(1000px)', // 選択肢のラベル名 'width' => 1000, // 最大画像幅 'height' => 9999, // 最大画像高さ 'crop' => false, // 切り抜きを行うかどうか 'selectable' => true // 選択肢に含めるかどうか ), ); foreach ( $my_custom_image_sizes as $slug => $size ) { add_image_size( $slug, $size['width'], $size['height'], $size['crop'] ); } } add_action( 'after_setup_theme', 'add_custom_image_sizes' ); function add_custom_image_size_select( $size_names ) { global $my_custom_image_sizes; $custom_sizes = get_intermediate_image_sizes(); foreach ( $custom_sizes as $custom_size ) { if ( isset( $my_custom_image_sizes[$custom_size]['selectable'] ) && $my_custom_image_sizes[$custom_size]['selectable'] ) { $my_custom_image_sizes[$custom_size]['name']; $size_names[$custom_size] = $my_custom_image_sizes[$custom_size]['name']; } } return $size_names; } add_filter( 'image_size_names_choose', 'add_custom_image_size_select' ); ?> |
例えば、上記コードを function.php に追記すると「６ アイキャッチ画像をサイズ指定して表示する」の３行目 wp_get_attachment_image_src() の引数に「new-Large」1000pxのサイズ・種類を追加することができます。５行目の連想配列で複数のサイズ・種類を増やすことができ、より多くのサイズ・種類に対応するときに便利です。
■上記を設定した場合の画像のサイズ
| サムネイル | thumbnail |
|---|---|
| 中サイズ | medium |
| 大サイズ | large |
| フルサイズ | full |
| ワイド(1000px) | new-Large |
８ カスタム投稿タイプを追加する
以下のコードを function.php に追記すると、投稿タイプ「お知らせ」が追加されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php $labels = array( 'name' => __( 'お知らせ'), 'singular_name' => __( 'お知らせ'), 'add_new' => __( '新規投稿'), 'add_new_item' => __( 'お知らせを新規作成'), 'edit' => __( 'Edit'), 'edit_item' => __( 'お知らせの編集'), 'new_item' => __( 'menu'), 'view' => __( 'お知らせを見る'), 'view_item' => __( 'お知らせを見る'), 'search_items' => __( 'お知らせを検索'), 'not_found' => __( 'お知らせはありません'), 'not_found_in_trash' => __( 'お知らせのゴミ箱は空です'), ); $args = array( 'labels' => $labels, 'capability_type' => 'post', 'public' => true, 'can_export' => true, 'query_var' => true, 'has_archive' => true, 'rewrite' => array( 'slug' => 'news', 'with_front' => false ), 'supports' => array('title','editor'), 'menu_position' => 3 ); register_post_type( apply_filters( 'news_post_type', 'news' ), apply_filters( 'news_post_type_args', $args ) ); ?> |
９ カスタム投稿タイプにタクソノミー（カテゴリ）を追加する
以下のコードを function.php に追記すると、カスタム投稿タイプにタクソノミー（カテゴリ）機能を追加します。以下の例は、カスタム投稿タイプ「ニュース(スラッグ名:news)」に「ニュースカテゴリー(タクソノミー名：info)」機能を追加したものです。
|
1 2 3 4 5 6 7 8 9 10 |
<?php function news_taxonomies() { register_taxonomy( 'info', array("news"), array( 'hierarchical' => true, 'label' => 'ニュースカテゴリー', 'query_var' => true, 'rewrite' => true ) ); } add_action( 'init', 'news_taxonomies', 0 ); ?> |
１０ カスタム投稿タイプの情報を取得する
カスタム投稿タイプのアーカイブページやシングルページで、カスタム投稿タイプのさまざまな情報を取得できます。
|
1 2 3 |
<?php $wp_query->get_queried_object(); ?> |
例えば、カスタム投稿タイプのアーカイブページでカスタム投稿タイプ名を取得するときは、archive.php に以下を記述します。
|
1 2 3 4 |
<?php $term = $wp_query->get_queried_object(); echo $title = $term->label; // 結果「お知らせ」などの投稿タイプ名が表示されます。 ?> |
