問合せフォームの設置にプラグイン「ContactForm7」利用する事が多く、元々「ドロップダウンリスト」の設置も簡単にできるため重宝しています。

しかし運用をしていると、項目に変更を加える場合に、多少のHTML知識が必要なため使う人を選ぶとなぁと。たまに感じます。

ダブルクォーテーション(「””」)を消さないようにとか、カッコの取り扱いなどの知識ですね。

間違って消してしまい、「あの選べるやつが消えちゃいました！」とか「表示されません」とか言われることがたまにありました。

自社案件の中で起きた問題なので、そこら辺のメンテナンス性を高めるにはどうするかと。

その後の利用を考えて、カスタム投稿のタイトルを突っ込むことにしました。

やる事は2つ

それを実現するためには、functions.phpの編集と、ContactForm7のタグの設定を行います。

functions.phpを編集する

まずはコードを載せてしまいます。

<?php

  //関数の作成

  function test_selectlist( $tag, $unused ){

    //ContactForm7のタグの名前が'test-tag'かどうか

    if( $tag['name'] != 'test-tag' ){

      return $tag;

    }

  

    //get_posts()でセレクトボックスの中身を作成する

    //クエリの作成

    $args = array(

      'numberposts' => -1,

      'post_type' => 'test',//使用するカスタム投稿タイプを指定

      'tax_query' => array(

        //カテゴリー等を指定する場合

        //この例ではカスタムタクソノミーを使用しています

        array(

          'taxonomy' => 'test_cat',//使用するカスタムタクソノミー名

          'field' => 'slug',//カスタムタクソノミー内で参照するタームを探す形

          'terms' => 'test-term'//探すターム名

        )

      ),

      //並び順⇒セレクトボックス内の表示順となります

      'orderby' => 'ID',

      'order' => 'ASC'

    );



    //クエリをget_posts()に入れる

    $test_posts = get_posts( $args );



    //クエリが泣ければ戻す

    if( !$test_posts ){

      return $tag;

    }

  

    //セレクトボックスにforeachで突っ込む

    foreach( $test_posts as $test_post ){

      $tag['raw_values'][] = $test_post->post_title;

      $tag['values'][] = $test_post->post_title;

      $tag['labels'][] = $test_post->post_title;

    }

  

    return $tag;

  

  }

  //add_filter()で項目を上書きするニュアンス

  add_filter( 'wpcf7_form_tag', 'test_selectlist', 10, 2 );

  ?>

コメントも入れてありますが、ざっくりと解説します。

カスタム投稿を使うということは、ワードプレスのデータベースに投稿として保存されているデータを呼び出すということになります。

投稿データの呼び出しはサブクエリを使用することで可能です。

なので、get_posts()関数を使用し投稿データを取得します。

$argsで取得する投稿を指定し、foreachで条件に該当する投稿分、セレクトリストに含まれるようにします。

特にカテゴリーを限定する必要が無い場合は、「tax_query」の項目は不要です。今回はカテゴリーを限定してます。

$tagの中にContactForm7で使用するタグの情報が入っているので、使用する項目に$test_post->post_titleとすることで、投稿のタイトルをリストに入れることができます。

あとは、add_filter()でリストの情報を上書きさせます。

この関数を通して作成されたリストを、使用したContactForm7のフォームで使えるようにします。

フォームのタグ名を指定した変数に合わせる

functions.phpに入力するコードの最初の方にでContactForm7のタグ名を指定しています。

<?php

  //関数の作成

  function test_selectlist( $tag, $unused ){

    //ContactForm7のタグの名前が'test-tag'かどうか

    if( $tag['name'] != 'test-tag' ){

      return $tag;

    }

この「$tag[‘name’] != ‘test-tag’」で指定したタグ名でContactFrom7のタグを使用します。

これで、このselectのリストは、カスタム投稿タイプ「test」のカスタムタクソノミー「test_cat」の「test-term」に分類された記事のタイトルが、セレクトボックスのリストに追加されます。

カスタム投稿で他の使い道もある可能性

今までContactForm7のselectに直接値を設定してきたんですが、最初に書いたHTML知識が多少必要なため、メンテナンス性が悪くなっていました。

それを分かりやすくしつつ、カスタム投稿タイプに細かい情報を追加する予定もあり。あえてカスタム投稿タイプを使用し、投稿データとして保存できるようにしました。

そうすれば、ワードプレス本来のブログの機能を使いつつ、項目管理がしやすくなるからです。

ワードプレスのカスタマイズ時には、ワードプレスが持っている機能をどのように使うかを考えて、組み込んでいくことを考えます。

そんな時に使えるのがサブクエリです。

ポータルサイトを作る時や、カスタムフィールドに数値データを入力している時に便利です。

WP_Queryクラスを使う

サブクエリの中でも、メインクエリと同じように投稿データを扱う事ができる、WP_Queryクラスを使用します。

今回の内容だけで言えば、get_posts()でも良いんですが。

この先に何か手を加える場合も考えて、WP_Queryで作っておくのが良いかと思います。

サブクエリについては、こちらの記事をご覧ください。

meta_queryで複数のパラメーターを指定する

複数のカスタムフィールドの値をクエリの条件に使う場合は、meta_queryのパラメータを使用するのが便利です。

カスタムフィールドのクエリで使用できるパラメータは以下の通りです。

<?php

$args = array(

    'meta_key'       => "カスタムフィールドのキー",

    'meta_value'     => "カスタムフィールドの値(文字列)",

    'meta_value_num' => "カスタムフィールドの値(数値)",

    'meta_compare'   => "テスト演算子",

    'meta_query'     => array(

                    'relation' => "複数のカスタムフィールドを指定した場合の関係",

                    array(

                      'key'      => "カスタムフィールドのキー",

                      'value'    => "カスタムフィールドの値",

                      'compare'  => "テスト演算子",

                      'type'     => "カスタムフィールドの値のタイプ"

    ),),

  );

?>

引用：WP_QueryーWordPress Codexs

このパラメータの中から、記事の一覧を呼び出すに必要なものを設定していきます。

今回はHTMLで用意したフォームから送信された値を使って、該当するカスタムフィールドの値を持つ投稿を呼び出すことが目的です。

なので、

・カスタムフィールドのキー

・カスタムフィールドの値

・テスト演算子

で指定します。

なので、HTMLフォームからデータを受け取る側のPHPファイルにこのように書きます。

<?php

$args = array(

    'post_type'       => 'test', //投稿タイプの指定

    'post_status'     => 'publish', //公開状態の指定

    'orderby'         => 'ID', //表示順の指定

    'posts_per_page'  => -1, //全件表示

    'meta_query'     => array(

                    array(

                    'key'      => 'test-text', //カスタムフィールドのnameを指定

                    'value'    => 'hoge', //hogeという値を探す

    ),),

  );



$test_query = new WP_Query( $args );



if( $test_query->have_posts() ):

  while( $test_query->have_posts() ):

    $test_query->the_post();

?>

カスタム投稿タイプ「test」の公開されている記事の中から、「test-text」というカスタムフィールドの値が「hoge」となっているものをID順に一覧表示する。

という内容です。meta_queryの中で指定していないcompareは初期値が「＝」、typeは「CHAR」なので省力しています。

meta_queryはrelationでAND、またはORを使うことで複数のカスタムフィールドを指定することもできます。

<?php

$args = array(

    'post_type'       => 'test', //投稿タイプの指定

    'post_status'     => 'publish', //公開状態の指定

    'orderby'         => 'ID', //表示順の指定

    'posts_per_page'  => -1, //全件表示

    'meta_query'     => array(

                    'relartion' => 'AND', //条件の追加

                    array(

                      'key'     => 'test-text', //カスタムフィールドのnameを指定

                      'value'   => 'hoge', //hogeという値を探す

                    ),

                    array(

                      'key'     => 'test-number', //追加する条件のカスタムフィールド名

                      'value'   => 2, //探す数値

                      'type'    => 'numeric', //データの型が数字であることの指定

                      'compare' => '!=', //valueで指定した値以外

                    ),

                  ),

  );



$test_query = new WP_Query( $args );



if( $test_query->have_posts() ):

  while( $test_query->have_posts() ):

    $test_query->the_post();

?>

relationの初期値はANDなので、ORの時だけ指定するのでも良いです。

これで条件に当てはまる記事一覧を指定することができます。

条件分岐を入れておく

自分が少しハマった経験もあるのですが、HTMLフォームから渡された値が空の場合、動作しない場合があります。

条件検索の場合は、選択されない項目がある場合があるからです。

なので、meta_queryで指定するパラメータを受け取っているかどうかで条件判定しておくと良いです。

<?php

$post_value = filter_input( INPUT_POST, 'フォームから受け取る値のあるname属性' );



$args = array(

    'post_type'       => 'test', //投稿タイプの指定

    'post_status'     => 'publish', //公開状態の指定

    'orderby'         => 'ID', //表示順の指定

    'posts_per_page'  => -1, //全件表示

  );



if( !empty( $post_value ) ){

  $args += array(

    'meta_query' => array(

                    array(

                      'key'   => 'test-text',

                      'value' => 'hoge',

                    ),

    ),

  );

}

?>

まずは、元となるクエリを最初に指定します。

これで、条件が指定されていない場合は、呼び出す投稿タイプの投稿一覧が表示されます。

そして、HTMLフォームから受け取った値があるかどうかを、empty()で判定します。

この書き方であれば、「値があれば」となります。

値があった場合に、クエリのパラメータに追加するmeta_queryのパラメータを指定する。

という流れとなっています。

変数を使う時の「＝」の前に「＋」を付ければ、追加してくれます。

後はループの内容とクエリの終了

ということで。今回のコード全文です。

<form method="post" action="htttps://test.com/" >

  <input type="text" name="test-form" value="hoge"/>

</form>

HTMLフォームは適当に用意したものなので、チェックボックスやセレクトボックス、ラジオボタンで実装すると良いです。

<?php

$post_value = filter_input( INPUT_POST, 'フォームから受け取る値のあるname属性' );



$args = array(

    'post_type'       => 'test', //投稿タイプの指定

    'post_status'     => 'publish', //公開状態の指定

    'orderby'         => 'ID', //表示順の指定

    'posts_per_page'  => -1, //全件表示

  );



if( !empty( $post_value ) ){

  $args += array(

    'meta_query' => array(

                    array(

                      'key'   => 'test-text',

                      'value' => 'hoge',

                    ),

    ),

  );

}



$test_query = new WP_Query( $args );



if( $test_query->have_posts() ):

  while( $test_query->have_posts() ):

    $test_query->the_post();

?>



<h2><?php echo the_title(); ?></h2>

<p><!-- 呼び出したいものを書いて行く --></p>



<?php endwhile; ?>

<?php endif;?>

<?php wp_reset_postdata(); ?>

これでクエリで絞り込んだ記事一覧の表示ができます。

また、カスタムフィールドに何らかの数値を保存している場合、その集計を行う事もできます。

その場合は、wp_reset_query()の前までに書いておくと良いです。

地味にはまった思い出

と、このようにコードを書き構文エラーは出てないんだけど、表示されない・・・

ということで地味にはまってた事があります。

原因は、カスタム投稿に保存されている値と、HTMLフォームから送信した値がずれていたことでした。

送る値とカスタム投稿に保存する値は確認しないといけませんね笑

オリジナルの条件付検索の実装方法でした

運営するWEBサイトの内容にもよりますが、条件検索を用意しておくと読者が便利にサイトを使う事ができるツールの一つとなります。

必要になった時の参考になればと思います。

調べていくと、記事を表示するために必要な機能っぽいんですが、タイトルに書いたように「メインクエリ」「サブクエリ」という種類があったり、「ループ」の方にも「メインループ」「サブループ」というものがあったりと。

理解するのが難しい・・・と自分も思ってました。

なので、今回はワードプレスで記事が表示される仕組みなども踏まえて、「メインクエリ」と「サブクエリ」、「メインループ」と「サブループ」について書いて行きます。

少し長くなりますが、「クエリ」と「ループ」は一緒に考えた方が仕組を覚えやすいと感じたので、最後までお付き合い頂けると幸いです。

「クエリ」とは？

まずは「クエリ」という言葉の意味から確認しておきます。

WEBページは、ブラウザからURL等で指定された、サーバー上にあるファイルをデータで取得することで表示されます。

「クエリ」とは、この「URL等」が当てはまり、サーバー上にあるデータを取得する条件を指定するモノの事を言います。

難しい説明はウィキペディアに任せてしまいますが。

問い合わせ（プログラミングの）。情報検索における明確な情報要求。主にキーワード群を論理演算子や他の修飾子で繋いで表現される。
出典: フリー百科事典『ウィキペディア（Wikipedia）』

「問い合わせ」という表現が使われている通り、「このデータがあったら頂戴ね！」とサーバーに伝える内容が「クエリ」という事です。

ワードプレスで考えると、記事データはデータベース上に保管されています。

なので、「データベースにこのデータがあった頂戴ね！」という、表示する記事データを指定するもの。という事になります。

・・・ちょっと乱暴な気がしますが、「ブラウザ上に表示したい記事データの条件を指定するもの」と理解してもらえれば大丈夫です。

ループとは？

ループは言葉の意味から考えると、繰り返し、となります。

ワードプレスにおいてもその通りの意味で、繰り返し処理を行うためのものです。

何を繰り返し処理するのかと言うと、先ほどの「クエリ」に当てはまったデータベース上にある記事データを、当てはまった件数分ブラウザに表示するための処理を繰り返してくれます。

言葉にすると分かりにくくなってしまいますが・・・

記事の一覧ページを想像してもらえると分かりやすいです。

あるカテゴリーに属する記事データを取得する「クエリ」を組んだ場合、そのカテゴリーで保存された記事データがサーバーから返されます。

そこで記事タイトルや記事の抜粋を表示するように作成した「ループ」を使う事で、記事一覧がブラウザ上に表示されます。

単一の投稿(各記事の内容を表示するページです。)が表示される理由は、サーバーに送信した「クエリ」に当てはまる記事が一つだから。ということです。

WordPressでページが表示される仕組み

・・・と、「クエリ」と「ループ」について書きましたが、個別で書くと書いてる側も良く分からなくなる・・・ということは言ってはいけませんね。

ここらへんは、ワードプレスがブラウザ上に記事を表示するまでの流れを整理するともっと分かりやすくなります。

まずはサーバー内についてですが、ブラウザに表示するためのワードプレス本体やテンプレートファイルや画像などはWEBサーバーに、画像以外の記事データはデータベースに保管されています。

読者は読みたい記事をブラウザ上からURLという形で指定して、WEBサーバーに「クエリ」が送られます。

「クエリ」を受け取ったWEBサーバーは、データベースからその「クエリ」に当てはまるデータを受け取ります。

データベースから受け取った記事データに基づき、WEBサーバーは表示に使用するテンプレートファイルを選択します。

これで、記事を表示するデータが揃ったので、テンプレートファイル内で指定されている「ループ」を使用してブラウザ上に表示します。

ざっくりと、「クエリ」の内容でデータベースに保管された記事データが呼び出され、呼び出された記事データの分だけ「ループ」の内容で表示される。

というのが「クエリ」と「ループ」の関係と言えます。

・・・まぁ色々と書いてきましたが、「そんなもんか」ぐらいの理解でも大丈夫です。

「クエリ」は記事データを取得するための機能。

「ループ」は取得するデータを表示するための機能。

であることが分かれば、どのような時に使えば良いかが分かりやすくなります。

そこを踏まえた上で、ワードプレスをカスタマイズする時に出てくる、「メインクエリ」と「サブクエリ」、「メインループ」と「サブループ」とは何か？について書いて行きます。

メインクエリとメインループ

まずは「メイン」という名前がついているものから書いて行きます。

言葉の通り、ワードプレス内で主に・・・というか特に設定の必要なく、ワードプレスサイトを表示するために使われている元々の「クエリ」と「ループ」です。

メインクエリ

ここまでも何度かURLがクエリであるような書き方をしてきましたが、「メインクエリ」とはそれです。

WEBページはどのサイトでも、表示する内容をURLという形で指定します。

ワードプレスに当てはめると、URLを指定することで、そのURLに紐づいて保管された記事データをデータベースから呼び出す。ということになります。

なので、ワードプレスで言われる「メインクエリ」とは、URLと言えます。

ワードプレスのページは起動した時点で表示されるので、起動直後に自動で発行されているクエリです。

メインクエリの動作を変更するには

メインクエリは自動で起動するため、特に設定する必要がないものですが、カスタマイズの使用でメインクエリの内容を変更したい場合があります。

例えば、
・自作テーマでブログトップページの記事表示件数を変更したい
・特定のカスタム投稿の記事データだけ取得したい

といった場合です。

個別にテンプレートを作成するよりも、メインクエリ自体を操作できた方が楽、という場合とも言えます。

その時は、アクションフックの「pre_get_posts」を使用することで、functions.php上で制御することができます。

例えば、特定のカスタム投稿タイプ「test」の一覧ページだけ表示件数を変更する場合。

<?php

//functions.phpに記入

function my_custom_archives( $query ){

	//管理画面、メインクエリを使用する場合は動かないように

	if( is_admin() || $query->is_main_query() ){

		return;

	}

	//表示の条件

	if( $query->is_post_type_archive( 'test' ) ){

		$query->set( 'post_per_page', 18 );

	}

}

add_action( 'pre_get_posts', 'my_custom_archives' );

?>

とすることで、メインクエリとは違う条件で記事データを取得することができます。

pre_get_postsアクションフックは、そのまま使うとダッシュボードを含むワードプレスサイト全体に影響が出てしまうので、管理画面や元々のメインクエリを使用するページでは除外するように、最初のif文を入れておきます。

メインループ

ループは表示するための機能でした。

なので、テーマに最初から用意されているテンプレートテーマの中にすでに記述されています。

<?php if(have_posts()): ?>

<!-- 投稿があった場合は以下を表示する -->

    <?php while(have_posts()): the_post(); ?>

        <!-- ループ内で繰り返す処理 -->

	<?php get_template_parts( 'template-parts/content/content', 'single' ); ?>

	

    <?php endwhile; ?>

<?php else: ?>

<!-- 投稿がない場合は以下の表示をする -->

    <?php get_template_parts( 'template-parts/content/404' );

<?php endif; ?>

これがメインループと呼ばれるコードです。

while以降の中にループで処理する内容を書いて行きます。

なので分かりやすくするために、使用しているif文も「｛｝」では無く、「：」と「end○○;」で区切られていることが多いです。

ワードプレスで使用するループでは、この書き方をすることが多いですね。

サブクエリとサブループ

続いて「サブクエリ」と「サブループ」ですが。

ざっくりと、「メインクエリ」と「メインループ」以外で使用するクエリとループの事を言います。

ワードプレスのブログページで良くあるのが、記事ページとサイドバーの2カラムのものですが。

サイドバーの中に、「人気記事一覧」が表示されているところがあると思います。

これは、読まれた数をカウントして、その多い順に〇件記事データを取得するというクエリを送り、取得したデータを表示するループを使用しています。

つまり、記事ページで記事本文は「メインクエリ」と「メインループ」で表示され、サイドバーなど他の部分では「サブクエリ」と「サブループ」で表示されているという事です。

・・・こう説明すると、やはりこんがらがりますね笑

なのでざっくりと、本文以外で記事データを使用して表示するのに使うものと覚えておけば良いです。

では、実際にどのように使うかですが、大きく2つの方法があります。

どちらの「サブクエリ」を使うかによって、表示に使用する「サブループ」も変わるので、それぞれ書いて行きます。

get_posts()を使う

一つ目の方法はget_posts()関数を使用することです。

こちらは記事データを呼び出すためのワードプレス関数です。

この関数を使用すると、メインクエリに影響を与えずにサブループを作成することができます。

get_post()で取得したデータは配列の形で帰ってくるので、foreach関数で呼び出されている事がほとんどです。

<?php

      //カスタム投稿タイプ「test」のクエリを全件取得で作成

        $args = array(

          'post_type' => 'test',

          'post_status' => 'publish',

          'orderby' => 'ID',

          'posts_per_page' => -1

        );

        $product_posts = get_posts( $args );

	

	//foreachでループを作成する

        foreach( $product_posts as $post ){

          setup_postdata( $post );

	

	  //selectボックスに入れるためのoptionタグを件数分作り出す

          $product_options .= '<option value="' . get_the_ID() . '">' . get_the_title() . '</option>';

        }

?>

      <select name="product-name">

        <option  value="" hidden>-絞り込む場合は選択-</option>

        <?php echo $product_options; ?>

      </select>

      <?php wp_reset_postdata(); ?>

foreach内のsetup_postdata()でループ処理が始まり、wp_reset_postdata()で処理が終わるようなイメージです。

記事の表示だけではなく、絞込み検索のリスト表示で記事データを使用したい場合などにも使えます。

WP_Queryクラスを使用する

もう一つの方法は、WP_Queryクラスを使う方法です。

WP_Queryクラスはメインクエリや先ほどのget_post()の処理でも利用されています。

なので、より複雑なサブループを指定したい時に使われています。

・・・と言っても分かりづらいですね。

メインループのような細かい扱いをサブループで行う場合・・・と言い換えておきます。

サブクエリの条件の決め方はほぼ変わりませんが、ループはメインループと同じコードで行えます。

<?php

      $args = array(

        'post_type' => 'test',

        'post_status' => 'publish',

        'orderby' => 'ID',

        'posts_per_page' => -1,

      );

      $test_query = new WP_Query( $args );

      if( $test_query->have_posts() ) : ?>

      <?php while( $test_query->have_posts() ) : $test_query->the_post(); ?>

      <h2><?php echo the_title(); ?></h2>

      <div><?php echo the_excerpt(); ?></div>

<?php 

      endwhile;

      endif;

      wp_reset_postdata();

?>

「投稿が無い場合にテンプレートを変える」といったメインループで使用するような条件分岐を、サブループ上でも使えるようになります。

慣れてしまっている分、クエリを使う時にWP_Queryクラスをさらっと書いてしまう悪い癖がついてます笑

細かい内容を設定できるので、使う場合にはパラメータの内容をリファレンスでチェックしましょう。

記事データを使い倒す

ワードプレスのカスタマイズにおいて、記事データの取得と表示は避けては通れないものです。

それを制御することができるのが、「クエリ」と「ループ」です。

使いこなすことができれば、読者にとって有益な記事を発見しやすいサイト作りをすることもできます。

また、記事をデータとして使用することで、さらに読者にとって便利なサイトに変化させることもできます。

便利なプラグインを入れたりカスタム投稿を設定すると、元々設定されているところに入るためそうなるのですが。

今取り組んでいる作業で複数のカスタム投稿を作成して、動作確認のために行ったり来たりすることが多いのです。

なので、サイドメニューを並び替えて見た目も分かりやすく効率を上げようと並び替えることにしました。

そこまでメニュー内容を増やさないとしても、自分好みの並びにすることで管理はしやすくなりますよ。

プラグイン「Admin menu Editor」

まずはプラグインで行う方法です。「Admin menu Editor」というプラグインを使用します。

有効にすると、左サイドバーの「設定」内に「Menu Editor」という項目が増えているので、そこから編集できます。

編集画面はワードプレスの「メニュー」の編集に似たようなものとなっているので、直感的に操作することができます。

今回のテーマである並び替えも通常のメニュー操作と同じく、ドラッグ&ドロップで入れ替えられます。

他にも、サブメニューとなっている項目をメニューに表示したり、あまり使わない項目を非表示にしたり。表記を変えたりメニューをカスタマイズすることができます。

プラグインでここまでできると楽ですね。

詳しい操作方法などは、ideyaさんのブログ記事が分かりやすかったです。

ただ、「メニュー項目を整理するのに、項目を増やすの？」という方もいるかもしれません。

・・・というか自分がそう思ってます笑

そういう場合はfunctions.phpを編集すればサイドメニューを並べ替える事ができます。

functions.phpを編集する

まずは決まり文句ですが。functions.phpを編集する場合は、エラーが出る場合もあるのでご注意下さい。

最近のバージョンではちゃんと「エラーが出てます」と表記してくれるので、「；」の付け忘れなど確認してみて下さい。

学び始めの頃はエラーを出しまくっていたので、構文チェックツールを使うようになりました。便利です。

最近はラッコツールズのPHP構文チェッカーを使ってます。ラッコがかわいくて良いです。

ダッシュボードの左メニューを並び替える場合は、「custom_menu_order」で並び替えを有効にし、並び替えの内容を「menu_order」で設定という様に、フィルターフックを2段階で使います。

コードリファレンス：menu_order , custom_menu_order

早速コードを載せておきます。

<?php

function token_adminmenu_order( $menu_order ){

  if( !$menu_order ) return true;

  return array(

    'index.php',

    'separator1',

    'edit.php?post_type=tax',

    'edit.php?post_type=trader',

    'edit.php?post_type=procat',

    'edit.php?post_type=product',

    'edit.php?post_type=zaiko',

    'edit.php?post_type=inventory',

    'edit.php?post_type=issue',

    'edit.php?post_type=receipt',

    'users.php',

    'separator2',

    'edit.php?post_type=acf-field-group',

    'cptui_main_menu',

    'wpcf7',

    'separator3',

    'edit.php',

    'upload.php',

    'edit.php?post_type=page',

    'edit-comments.php',

    'themes.php',

    'plugins.php',

    'tools.php',

    'options-general.php',

    'siteguard',

  );

}

add_filter( 'custom_menu_order', 'token_adminmenu_order' );

add_filter( 'menu_order', 'token_adminmenu_order' );

 ?>

現在行っている作業で使用している、並び替えのメニューのコードをそのまま持ってきました。

token_adminmenu_orderという独自関数を設定して、並び替えの内容を設定します。

そして、custom_menu_orderの第2引数に関数を設定することで並び替えを有効にし、menu_orderで配列の内容で並び替えてね！という流れになっています。

なので、実際にメニュー項目を表しているのはarrayの中身です。

return array(

    'index.php',

    'separator1',

    'edit.php?post_type=tax',

    'edit.php?post_type=trader',

    'edit.php?post_type=procat',

    'edit.php?post_type=product',

    'edit.php?post_type=zaiko',

    'edit.php?post_type=inventory',

    'edit.php?post_type=issue',

    'edit.php?post_type=receipt',

    'users.php',

    'separator2',

    'edit.php?post_type=acf-field-group',

    'cptui_main_menu',

    'wpcf7',

    'separator3',

    'edit.php',

    'upload.php',

    'edit.php?post_type=page',

    'edit-comments.php',

    'themes.php',

    'plugins.php',

    'tools.php',

    'options-general.php',

    'siteguard',

  );

カスタム投稿やプラグインなども入ってるので、ちょっと複雑に見えますが。

ここに書く内容は、メニュー項目にマウスカーソルを合わせることで調べられます。

ブラウザによるとは思いますが、表示されるリンク先URLの「～/admin/～」以降のURLがメニューに表示される内容となります。

この画像の内容だと、「index.php」となりますね。

一応、インストール直後の初期状態で表示されているものはこんな感じです。

ここに追加したプラグインやカスタム投稿タイプが追加されると、メニューに表示されていきます。

調べられたら自分の好みの順序で入力していけば並び替えは完了です。

ちなにみ、コード内にある「separator」は「空白」です。区切りに使うと見やすくなります。

あれ？並び替えが効かない・・・

これまでの内容で並び替えが実行されますが、一部のメニューの配置が変わらない場合があります。

まずは、タイプミスや使用したURL部分を見直しましょう。

結構やりがちです(良くやります)。

しかし、構文チェックも問題無いし、タイプミスも無いし・・・でも並び替えが反映されない。

その場合の原因は2パターン考えられます。

使用するURL部分が「admin.php～」で始まっている

プラグインのメニュー表記で良くあるのが、「～/wp-admin/admin.php?～」となっているものです。

この場合は、先ほどの説明だと「admin.php~」を書けばよいことになりますが。

この表記の場合は「admin.php?page=～」以降、つまり「=」以降を書くのが正しい指定とされています。

例えば、「admin.php?page=token」となっている場合、並び替えに入力するのは「token」となります。

意外とハマります笑

プラグインのトップレベルページではない

あくまでただ単に並べ替えるという事での話です。サブメニュー（マウスカーソルを合わせると表示されるメニュー）をサイドメニューに表示させるということではありません。

プラグインの場合、そのプラグインで設定されているトップレベルページを指定しないと、並び替えが反映されない場合があります。

これが厄介なところで、サイドメニューに表記されているものではない事があります。

その場合は探すしかない・・・となりますが、他の人が作ったものなので難しく感じます。

簡単に調べる方法は、一度プラグインを無効化して再度有効化した時に表示されるページのURLを見ることです。

そこに表記されているものを使えば、並び替えが有効となります。

プラグインでもコードでも並び替えはできる

管理画面のサイドメニューの並び替えは以上です。

見た目が分かりやすくなるので、作業効率は上がります。

普段はワードプレスを使用したホームページの納品で使用しています。

メニューの並びを変えるだけでも、かなり使いやすさは変わります。

プラグインを使う方が操作が分かりやすいですし、競合を考えるのであればコードを使うのが良いかと思います。

その中でワードプレスは世界で一番使用されています。

CMSと言われると、投稿ページや固定ページといった、WEBページのメインとなるコンテンツのことを思い浮かべてしまいますが。

ワードプレスは、サイドバーやフッター等に設置するコンテンツの管理も「ウィジェット」という機能で楽にしてくれます。

ウィジェットとは？

「ウィジェット」は、サイドバーやフッター等で使用するコンテンツの管理を簡単にしてくれるワードプレスの機能です。

追加できるコンテンツの一部を上げると、

・最新記事一覧のリンク表示

・記事の検索機能

・プロフィールなどのテキストコンテンツ

など。

WEBサイト内の回遊性を良くしたり、掲載する情報の信用度を高めるためのコンテンツを作成できます。

編集方法も簡単で、これらの機能をドラッグ&ドロップするだけで設置できます。

ウィジェットの編集方法

ウィジェットは管理画面の左サイドバーの、「外観＞ウィジェット」で編集できます。

「外観＞テーマ」のテーマカスタマイザー内にもウィジェットの項目があります。

テーマカスタマイザーからなら、実際にどのように表示されるかを確認しながら編集することができます。一応、ワードプレスに元々用意されている機能に限定ですが。

今回は「外観＞ウィジェット」で表示される画面で説明していきます。

こちらの左側の内容がウィジェットに設置できる機能、右側がウィジェットを設置できるエリアとなります。

設置方法は簡単です。

設置したいエリアの「▼」のボタンをクリックし開いたところへ設置したいウィジェットをドラッグ&ドロップすれば完了です。

設置後に使用するウィジェットごとの設定し、「保存ボタン」を押せばウィジェットは設置されます。

順番の入れ替えも設置したウィジェットをドラッグ&ドロップで入れ替えるだけ。

削除したい場合は、設置したウィジェットの設定項目の下の方にある削除ボタンを押せば解除されます。

このように、コンテンツの追加・削除を簡単に行えます。

ウィジェット設定でできること

ここまでの説明で使用した画像の通り、使用できるウィジェットは多いです。

元々用意されているものだけでも、2020年8月時点で17個あります。

アップデートにより内容の変更や、機能の追加があるので、良く使うものだけ紹介しておきます。

カスタムHTML

ブロックエディタでもおなじみの機能です。

ウィジェットに埋め込むことで、設置した箇所にHTMLコードを直接入力できます。

・テンプレートファイルを編集するほどではないちょっとした内容

・他のウィジェットをオリジナルタグで囲みたい場合

・Twitter、Youtube動画などの埋め込みコンテンツを使う場合

など、覚えておくと便利に使えるウィジェットです。

今では埋め込みコンテンツ用のブロックがありますが、CSSなどのコードを直書きする場合にはいまだに便利です。

テキスト

テキスト編集ができるウィジェットです。

入力ボックスはクラシックエディターと同じ編集画面なので、使いやすいですね。

プロフィールの設置などで良く使います。

テキストとHTMLを一緒に編集したい時に便利です。

今は「クラシックブロック」というものがこちらに当たるかなと。

ウイジェット内でビジュアルエディタもしくはマークダウンで記載したい時に利用できます。

最近の投稿

投稿を作成した記事を最新のものから指定件数リスト表示することができます。

ほとんどのブログに実装されている機能なので、おなじみのものかもしれません。

アイキャッチも表示したい場合は、プラグイン「Recent Posts Widget With Thumbnails」を使用すると便利さが増します。

検索

記事検索用に用意しておくと、ユーザーがWEBサイトを使いやすくなります。

記事数が増えたとしても、知りたい情報にアクセスするための入口として使ってもらえます。

プラグインでも追加できる

初期状態で使用できるものすべてを覚える必要はありませんが、良く使う機能を抑えておけばさらに便利に使えます。

また、ウィジェット機能を備えたプラグインであれば機能の項目に追加され、同じように設定することができます。

初期設定とほぼ同じ機能でも、プラグインの方が使いやすかったり、便利な機能が追加されている場合もあります。

色々なプラグインがありますが、実際のアクセス数に基づいて人気記事ランキングを生成してくれる「WordPress Popular Posts」は面白いですよ。

ウィジェットを設置できる場所

ウィジェットを設置することのできる場所は、テーマのテンプレートファイルで設定されています。

良くあるものだと、サイドバーやフッター、ナビゲーションメニューの下側などですかね。

細かく設定できるものだと、投稿ページや固定ページなどの条件に合わせて設置することができるテーマもあります。

これは、テーマ制作者が「ここでウィジェットを使えれば便利だろうな」と思って、呼び出すコードを設置してくれているからです。

言い換えると、そのウィジェットを呼び出すコードを書きさえすれば、お気に入りのテーマ内の好きなところに設置個所を自分で増やすことができるということです。

設置場所を増やすには

設置個所を増やすにはテンプレートファイルを編集することになるので、子テーマの利用をオススメします。

増やす場面としては、テーマを使っていて「ここに検索窓を付けられたら便利だな」とか、「フッターエリアの上側にバナーを設置して、定期的に入れ替えたいけどウィジェットが無い」といった場合や、テーマを自作している時にウィジェットを使用する場合です。

手順は大きく分けて2つです。

①functions.phpでウィジェットエリアを作成する

②テンプレート内にウィジェットを呼び出すコードを書く

functions.phpでウィジェットエリアを作成する

ウィジェットはワードプレスの機能なので追加するコードをfunctions.phpに書き込みます。

<?php
//ウィジェット領域の設定
add_action('widgets_init', 'add_widget_area');
function add_widget_area(){
  register_sidebar(array(
    'id'            => 'widget_id',                   //任意のID
    'name'          => 'ウィジェットエリアの表示名',    //任意の表示名
    'description'   => 'ウィジェットエリアの説明文',    //必要であれば
    'before_widget' => '<div>',                       //任意。ウィジェットをタグで囲みたい場合
    'after_widget'  => "</div>\n",                    //任意。タグで囲む場合の閉じタグ
    'before_title'  => '<h4 class="original-WG"'>,    //任意。タイトル用のタグ
    'after_title'   => "</h4>\n",                     //任意。タイトル用の閉じタグ
  ));
}
?>

「id」「name」は必須です。

他にも管理者がいる場合は、「description」でどこのエリアかを書いておくと便利です。

追加したウィジェットにオリジナルのCSSを反映させたい場合には、「before_widget」に開始タグとclass、「after_widget」に閉じタグを設定します。

タイトルにも同じく「before_title」「after_title」にタグを指定することができます。この例では、H4タグにしてます。

コードでエリアを追加した場合、表示のCSSが他のウィジェットと変わってしまう事が多いので、ここでclass指定しておけばスタイルシートで管理できるので良いですね。

テンプレート内にウィジェットを呼び出すコードを書く

ウィジェットエリアを追加しても、それだけではページには反映されません。

なので、追加したウィジェットがページ内に反映されるようにテンプレートを編集します。

編集するテンプレートは、header.php、footer.php、sideber.phpが多いとは思いますが、single.phpやpage.phpにも設置できます。

<?php 
  
  if(is_active_sidebar('作成したウィジェットで設定した「id」')): dynamic_sidebar('作成したウィジェットで設定した「id」');
      
endif; ?>

こちらのコードは、作成したウィジェットに何かが設置されていると、ページにウィジェットで設定した内容が表示する、という内容になります。

「’ ’」内にはウィジェットエリア作成時に設定した「id」を入力してください。

複数作成した場合も、この「id」を変更することで呼び出すウィジェットエリアを変更する事ができます。

ウィジェットの追加は「更新頻度」から考える

これでお気に入りのテーマの使いたいところにウィジェットを設置できます。

とはいえ、テーマを自作する場合はともかく、普段自分で使用する場合にはテンプレートファイルに直接コードを書いてしまった方が効率が良い場合もあります。

紹介したウィジェットの設置個所を増やすコードを使用するかどうかの決め手は、ズバリ「更新頻度」だと思います。

たとえば、ロゴや画像など一度設定したら内容や表示位置をほとんど変更しないコンテンツでウィジェットエリアがない場合であれば、テンプレートファイルに直接書き込んでしまった方が楽かもしれません。

youtubeチャンネルを運営していて、アップロードした動画を定期的に変更できる埋め込み箇所がサイドバーに欲しいという場合は、ウィジェット化してしまった方が管理は楽になります。

このように、どのように使っていくかを考えてから増やしましょう。

じゃないと、ウィジェットの管理画面に大量の設置エリアが出来上がってしまい、逆に管理しにくくなってしまう恐れがあります。

Ver5.8からブロックウィジェットになりました。

ワードプレスのバージョン5.8から、より直感的に編集・管理できるブロックウィジェットが標準となりました。

基本的には、今までのウィジェットと使える内容はほとんど変わりませんが、ブロックエディタでの投稿の編集のようにウィジェットの編集を行えます。

操作方法もブロックエディタとほぼ同じですね。

ウィジェットの編集画面を開いた状態で、ウィジェットエリアのライブプレビューを見ながら編集できるような感覚です。

使いにくかったり不具合がテーマに出る場合は、プラグイン「Classic Widgets」を使用することで、元のウィジェット編集画面を表示できます。

ウィジェットを使いこなすと、サイト運営が楽になる

ウィジェットで追加できる機能はユーザーにとっては便利なものが多いので、WEBサイト内の回遊性が良くなります。

WEBサイト内の回遊性を高めれば、アクセス数が増えることにもつながります。

しかも、管理画面から簡単な操作で管理・設定することもできます。

最近ではWEBサイトとSNSを連携させることも、WEBサイトの運用を考えた時に外せない事なので、設置個所として考えた場合に最適な場所とも言えます。

ウィジェットを有効利用することで、WEBサイトを見るユーザーと管理する側の双方にメリットがある状態を作りやすくなります。

ワードプレスで行うセキュリティ対策の一つとしてあげられるのが、「パーミッションを変更しよう！」というものです。

今回はワードプレスに必要なパーミッションの設定について書いて行きます。

パーミッションとは？

パーミッションとは、サーバー上にあるファイルの読み込み・書き込み・実行の権限を指定するものです。

ワードプレスに関わらず、WEBサイトはサーバーにアップロードされたファイルに書かれているコードにより表示されます。

そのファイルの内容が変更されれば、当然表示されるWEBサイトの内容は変わります。

つまり、パーミッションを設定しないとWEBサイトの改ざん・乗っ取りといった被害に遭ってしまう可能性が高まります。

WEBサイトの改ざん・乗っ取り被害の結果、訪問者がホームページの利用やブログ記事を読むことを安心して行えなくなってしまいます。

なので、セキュリティ対策の一環として推奨されているんですね。

パーミッションによる権限の設定

では、どのようにサーバー上のファイルを扱う権限をパーミッションで指定するかですが。

「パーミッション」についてネット上の情報を調べると、3桁の数字か10桁の英字が出てくると思います。

これは、「Owner(オーナー)」「Group (グループ)」「Other(その他)」という3種類の立場に分けて制限していることを表しています。

まずはこの3種類の分類について説明しておきます。

どのように分けられているかと言うと、サーバー上のファイルとのかかわり方による違いです。

「Owner」はファイルの作成者自身です。WEBサイトの「所有者」という言い方になります。

WEBサイトを編集・更新を行うので、すべてのファイルやフォルダにアクセスできた方が便利です。

「Group」は同じサーバーを使用している人達です。「所有グループ」という難しい言い方になりますが。

自分自身のサーバーであれば、一緒に管理する人と言えます。しかし共用のレンタルサーバーであれば、まったくの他人という事になってしまいます。

自分のWEBサイトを表示するファイルに近いので、セキュリティ的には一番怖いところかもしれません。

「Other」はそれ以外の人達ですね。人以外にも、ファイル変更・更新を行うアプリケーションもこちらに分類されます。

すこしイメージしにくいかと思うので、関係を図で書いておきます。

この図はあくまでサーバー上のファイルと分類の関係をイメージしやすくするためのものなので、ご了承下さい。

厳密に言うとファイルを操作する権限なので、この図の区分けとは多少異なります。

次に、パーミッションの変更方法について説明します。

パーミッションの変更方法

パーミッションを変更するには、サーバー上のファイルの設定を変更しなければなりません。

なので、FTPソフトと呼ばれる、サーバーにアクセスするためのソフトを使用します。

FTPソフトは様々なものがあるのでお好きなものをご利用下さい。

この記事では、Windowsパソコンで良く使用される、「FFFTP」の画面表示を見ながら解説していきます。

設定されているパーミッションの確認方法

まずは、FFFTPでサーバーに接続して、サーバーにアップロードされているファイルやフォルダを表示します。

接続後に表示される一覧の「属性」の列で、現在設定されている英字表記のパーミッションを確認できます。

ディレクトリでもファイルでも良いので、右クリックのメニューから「属性変更」を選ぶと、パーミッションの設定状況をチェックボックスと数字表記で確認できます。

冒頭で紹介した数字と英字による2種類の表記をこれで確認できます。

次にそれぞれの意味を説明します。

パーミッションの表記の意味

数字表記の場合は、それぞれの桁でパーミッションを設定する権限グループを表し、数字で許可する内容を表しています。

図のように左の数字から「所有者(Owner)」権限、「所有グループ(Group)」権限、「その他(Other)」権限の許可内容を表しています。

許可の内容を表す数字はあらかじめ決められています。

この3つ(0は禁止なので除外しています。)の数字の足し算で、許可している内容を表しています。

なので数字表記の場合は、７・５・６・３・０の組み合わせで表現されているんですね。

数字だけを見ると意味が良くわかりませんが、意味が分かれば理解しやすい表記と言えます。

続いて英字表記ですが、これも基本は数字表記と同じです。

一番左の文字はディレクトリかどうかの判定なので、省略されていることもあります。

なので、権限設定をするのは残りの9文字です。これを3文字ごとに分けて設定します。

文章だと分かりにくいので表にしてみます。

・・・これでも分かりにくいかもしれませんね。

簡単に言うと、3文字区切りで「読み取り」「書き込み」「実行」の順番に表現しているということです。

なので、図の例は実際だと「 r w x – – – r – – 」という表記になり、

・所有者は全て許可( r w x – – – r – – )

・所有者グループは全て禁止( r w x – – – r – – )

・その他は読み取りだけ許可( r w x – – – r – – )

というパーミッションになっていると理解できます。

パーミッションの変更方法

以上を踏まえて、FFFTPを使って設定を変えます。

変更したいファイル上で右クリック→「属性変更」で以下のウインドウを開きます。

FFFTPの場合は、権限グループごとにチェックを入れることでも設定できますし、数字を入力して変更することもできます。

入力した後に「OK」を押すと、属性列の英字表記の内容が変わり、変更を確認できます。

パーミッションの設定方法は以上です。

繰り返しになりますが、ご使用のFTPソフトに合わせて変更するようにして下さい。

WordPressで推奨されるパーミッション設定

説明した方法を使えば自由にパーミッションの設定を変えることができますが、一つ一つのファイルを確認して設定するのは大変です。

なので、ワードプレスが公式に推奨しているパーミッション設定を書いておきます。

①.htaccess

リダイレクトやSSLなどのアクセスされた時の動作を管理する「.htaccess」を利用している場合は、「604」か「606」に設定しましょう。

リダイレクトの設定ができるので狙われやすいファイルの一つです。

しかしワードプレスの機能もこのファイルを使用するので、「その他」の権限にも「読み取り」と「書き込み」を許可しておきます。

②wp-config.php

ワードプレスとデータベースをつなぐための各設定情報を記載している、重要なファイルの一つです。

公式で推奨されているパーミッションの設定は「600」です。

所有者権限以外はアクセスを禁止する設定ですね。

③他のファイル・ディレクトリ

ディレクトリは「705」、ファイルは「604」の設定が推奨されています。

記事の投稿や画像等のアップロード、プラグインの追加や削除等、ワードプレスの運営に関わる操作を、ワードプレス側から行える設定にしておきます。

パーミッションの変更後は動作確認を忘れずに

パーミッション変更後はホームページの動作テストを行ってください。

特に確認して欲しいのはこちらです。

・ダッシュボードへのログインができるか

・記事の投稿やメディアのアップロードが正常にできるか

・プラグインの追加、削除ができるか？

・テーマの変更ができるか

パーミッションの変更を間違っていれば、これらのページへのアクセスや作業を行った場合に、500エラーが起きるか真っ白な画面が表示されます。

その場合は該当する変更したファイル・ディレクトリのパーミッションを再度変更して対処しましょう。

WordPressで出来るセキュリティ対策の一つ

ワードプレスは個人・法人問わず、世界中で使用されているCMSです。

そのため、セキュリティ対策をしっかりとしておかないと思わぬ事態が起きてしまう可能性があります。

ワードプレスを元に会員制サイトなど、個人情報を扱うつもりであればセキュリティ対策は万全にしておきたいものです。

セキュリティプラグインも様々なものが用意されていますが、サーバー上のファイル・フォルダに対するセキュリティもチェックしておきましょう。

オリジナルの投稿を作成できるので様々な用途に使えますが、通常の投稿機能のようにカテゴリーなどで分けることが最初はできません。

そのため、カスタムタクソノミーを設定してカスタム投稿で作成した記事を分類できるようにします。

カスタムタクソノミーの設定方法

設定する方法はプラグインを使用する方法と、テーマファイルのfunctions.phpを編集する2つの方法があります。

カスタムタクソノミーの作成は、カスタム投稿を作成した後が良いです。

カスタム投稿の作成時に設定したカスタム投稿の分類名を使用するからです。

ご紹介するプラグインを使用すれば、カスタム投稿とカスタムタクソノミーを一か所で設定できて便利です。

プラグインを使用する方法

カスタム投稿やカスタムタクソノミーの設定を行うコードはやや複雑なので、プラグインを利用すると便利です。

「Custom Post Type UI」というプラグインを使用します。

カスタム投稿とカスタムタクソノミーを作成する場合の定番プラグインです。

有効化すると以下のメニューが管理画面のサイドバーに追加されます。

カスタム投稿を作成する

一応、カスタム投稿タイプの設定も説明しておきます。

「投稿タイプの追加と編集」を押します。まずは「基本設定」の項目です。

 

・投稿タイプスラッグ
作成する投稿タイプのURLやコードで使用する名前です。半角英数で入力します。

・複数形のラベル
管理メニューに表示される「投稿」や「固定ページ」のような項目名です。
日本語でも大丈夫なので、分かりやすいものを入力しておきましょう

・単数形のラベル
必須項目ですが、上の「複数形のラベル」と同じもので大丈夫です。
英語を使用した場合に呼び方が変わる場合に対応するための設定項目ですが、日本人ですし・・・

続いて下の「追加ラベル」は飛ばして、「設定」の項目に飛びます。

 

 

ここで設定する内容は基本は初期設定のままで、2か所変更することをオススメします。

・アーカイブ有り
初期設定ではFalseとなっているので、Trueにしましょう。
基本設定の所で設定した「投稿タイプスラッグ」のURLで、このカスタム投稿の一覧記事を表示できるようになります。
使用するスラッグを別にしたい場合は、下のボックスで違うスラッグを入力して変えることもできます。

・サポート
ここの項目は、通常の投稿画面の右サイドバーやエディターの下に表示される機能で、作成するカスタム投稿で使用したいものを選択できます。

このスクショではサポートの全項目にチェックを入れてあります。
元々の投稿とほぼ同じ機能をカスタム投稿でも使いたい場合は、全部チェックを。
良く使うものだけにしたい場合は、必要なものだけチェックを入れましょう。

すると、管理画面の左サイドバーに作成したカスタム投稿が追加されます。

これでカスタム投稿を利用することができるようになります。

カスタム投稿タイプの登録だけなので、新規登録とカスタム投稿で作成した記事の一覧だけですね。

それでは、カスタム投稿で作成した記事を整理するために、カスタムタクソノミーを設定していきましょう。

カスタムタクソノミーを設定する

カスタムタクソノミーの設定もカスタム投稿の設定とほぼ同じです。

まずは「基本設定」です。

赤枠の部分を入力しますが、内容はカスタム投稿と同じなので説明は割愛します。

追加で設定するものは一番下の「利用する投稿タイプ」の部分です。

ここで、作成するタクソノミーをどの投稿に紐づけるかを設定できます。

もし作成したカスタム投稿の整理のみで使用するだけであれば、カスタム投稿と同じものでも大丈夫です。

・・・本来は別の方が良いと思いますが、分かりやすさだけで言えば一緒でも機能はしてくれます。

続いてカスタム投稿と同じく「追加設定」は飛ばして、「設定」を行います。

ここで行う設定は一か所で大丈夫です。

・階層
初期設定はFalseとなっています。作成するタクソノミーをどのように使いたいかで設定しましょう。
　True　→　カテゴリーのように階段状の管理方法となります。
　False   →　タグのようにキーワードでグループを作っていくような管理方法となります。
特にこだわりが無ければ、Trueにしておいた方が便利だと思います。

これで保存してカスタムタクソノミーを設定すると、「利用する投稿タイプ」でチェックを付けたメニューの中に追加されます。

こちらの画像では、「テスト」というカスタムタクソノミーを作成して、「テスト」というカスタム投稿タイプに反映させてます。

階層もTrueにしてあるので、「投稿」の「カテゴリー」と同じ使い方ができます。

最後に、「設定」→「パーマリンク設定」で何もせずに「保存」ボタンを押しておいてください。

カスタム投稿もカスタムタクソノミーもパーマリンクに影響を与える設定です。

ちゃんと機能するように何も変更はしませんが、更新するつもりで「保存」しましょう。

以上がプラグイン「Custom Post Type UI」を使用したカスタムタクソノミーの設定方法です。

カスタム投稿の作成も一緒にできるので、プラグインを利用した方が楽だと思います。

functions.phpを編集して設定する方法

「プラグインで設定した方が楽だよ！」と言ってしまった後で、テーマファイルであるfunctions.phpの編集方法を知りたい方はあまりいないと思いますが。

・プラグインを増やすとホームページの動作が重くなるし。。。

・プラグインのアップデートで動作しなくなるのがこわい。。。

といった場合にはfunctions.phpで追加する方が良いと思います。

カスタム投稿タイプのコード

add_action( 'init', 'create_post_type' );
function create_post_type(){
  register_post_type( 'test',         //投稿タイプのスラッグ
      array( 'label' => 'テスト',     //投稿タイプの表示名
             'public' => true,        //投稿タイプの編集(使用)を可能にする
             'show_in_rest' => true,  //ブロックエディタで使用する設定
             'menu_position' => 5,    //メニュー表示箇所の指定
             'supports' => [ "title", //投稿編集画面の表示内容を決める項目
                             "editor",
                             "author",
                             "thumbnail",
                             "excerpt",
                             "custom-fields",
                            ],
             'has_archive' => true, //投稿タイプのアーカイブを有効にする
      )
   );
}

「投稿タイプのスラッグ」「投稿タイプの表示名」の「’’」の中をお好きなものに変更してください。

プラグインで設定したのと同じ設定となります。

カスタムタクソノミーのコード

add_action( 'init', 'create_custom_taxonomy' );
function create_custom_taxonomy(){
  register_taxonomy(
    'test',//カスタムタクソノミーのスラッグ
    'test',//カスタムタクソノミーが動く投稿タイプ
    array(
      "label" => __( "テスト" ), //カスタムタクソノミーの表示名
      "public" => true,          //カスタムタクソノミーを検索可能にする
      "show_in_rest" => true,    //ブロックエディタで使用する設定
      "hierarchical" => true,    //カテゴリーのような階層管理にする
      "rewrite" => [ 'slug' => 'test' ],//URLの書き換え設定
    )
  );
}

カスタムタクソノミーの場合はこちらです。

「カスタムタクソノミーのスラッグ」「カスタムタクソノミーの表示名」はお好きなものに変更してください。

「投稿タイプ」の指定は、作成したカスタム投稿のスラッグ名を入れて下さい。

以上がテーマファイルを編集して、カスタム投稿とカスタムタクソノミーを追加する方法です。

プラグインを使うよりも細かい設定ができるので、詳しくはリファレンスをご覧ください。

関数リファレンス/register_post_type()

関数リファレンス/register_taxonomy()

カスタム投稿だけで使うもの？

これで作成したカスタム投稿を、自分で決めた方法で整理することができるようになります。

カスタム投稿で作成した投稿の一覧画面を作り、ホームページに訪れる方が便利に使えるように作成できます。

・・・と、これだけでも十分便利な機能なのですが。

functions.phpの編集方法で「カスタム投稿名」を入れたところに投稿の「post」や固定ページの「page」使うと、通常の投稿や固定ページにもカスタムタクソノミーを設定して使えるようになります。

register_taxonomy(
    'test',//カスタムタクソノミーのスラッグ
    'post',//ここに投稿の"post"、固定ページの"page"を指定する
    array(
      "label" => __( "テスト" ),
      "public" => true,
      "show_in_rest" => true,
      "hierarchical" => true,
      "rewrite" => [ 'slug' => 'test' ],
    )
  );

この「カスタムタクソノミーが動く投稿タイプ」の所に入れます。

元々ある投稿に追加すると、こんな感じになります。

これにより元々のカテゴリーやタグとは別に、自分自身で決めた基準で記事を整理することができます。

しかし、カスタム投稿ではない元々の投稿なので「カテゴリーやタグで分類できるから良いのでは？」と思われるかもしれません。

最初の内はカテゴリーやタグでしっかりと整理できていたとしても、運用期間が長くなると記事の内容の微妙な違いでカテゴリーやタグが増えてしまうのは良くあることです。

その結果、カテゴリーの量だけが増えていてなんの分類だったか良く分からなくなることもあります。

自分だけならまだ良いですが、ホームページ上でカテゴリー一覧を表示している場合、ホームページの訪問者にも分かりにくいものとなっているかもしれません。

「うまくカテゴリーを整理できていない」

「ごちゃごちゃしてきた」

「タグの統一感が無くなってきた」

という問題を、カスタムタクソノミーを使うことで解消できます。

タクソノミーとは？

機能として使う分には、カスタムタクソノミーを使えばカテゴリーを増やすことができるという理解ができていれば問題はありません。

しかし、Wordpressのカスタムタクソノミーはタグの機能としても利用することができます。

  register_taxonomy(
    'test',
    'post',
    array(
      "label" => __( "テスト" ),
      "public" => true,
      "show_in_rest" => true,
      "hierarchical" => true,    //カテゴリーのような階層管理にする
      //trueで階層有りのカテゴリのような管理、falseで階層無しのタグのような管理　　　　　　　　　　　　　
      "rewrite" => [ 'slug' => 'test' ],
    )
  );

ここで疑問に思うことが、元々あるカテゴリーとタグという分類方法と、この新たに作成したカスタムタクソノミーを使用した分類方法の違いです。

自分も使い分けを考えた時に、どのように分ければ良いかで混乱した経験があります。

このカテゴリーとタグとカスタムタクソノミーの関係性が良く分からなかったからです。

「タクソノミー」という言葉の意味を調べると、「分類学・分類法・分類」と説明されています。

「カテゴリー」はというと、「部類・分類・ジャンル」という意味が出てきます。

言葉の意味から考えると意味は同じで呼び方が違うだけかと思ってしまいます。

言葉の使い方で言うと、「カテゴリー分け」ということは言っても、「タクソノミー分け」という言い方はしません。

一般的に言わないだけかもしれませんが、これがタクソノミーとカテゴリーの違いについて話す上で分かりやすい関係かなと思います。

ひとことでタクソノミーとカテゴリーの関係を表すと、

「カテゴリーはタクソノミーの一つの方法である」

という言い方になります。

「分類は分類の一つの方法である」と言ってるので、ますます分からなくなりそうですが。

答えはタクソノミーの意味ですね。

タクソノミーは「分類学・分類法」という分類について扱う学問や科学のことを意味しています。

そして、カテゴリーは「分類・ジャンル」という分類する方法を意味しています。

なので、「タクソノミーに基づいてカテゴリーで分ける」という事になります。

ワードプレスというWEBサイトで考えると、作成するページを分類する方法（タクソノミー）として、前もってカテゴリーという手段とタグという手段が用意されているという事です。

そして、ワードプレスサイトの制作者の好きに設定できる分類の方法（カスタムタクソノミー）が機能として用意されていて、カテゴリーやタグのような手段で扱う事ができるということになります。

・・・言葉だけでは難しいので、簡単な図を書いておきます。

厳密には樹形図で整理するのがタクソノミーで・・・とか色々あるみたいですが、自分は分類学の専門家ではないので興味のある方は調べてみて下さい。

余談みたいな内容ではありますが、元々あるカテゴリーとカスタムタクソノミーの使い分けを考える場合に頭が整理されるかなと思います。

カスタムタクソノミーを使うメリットは？

余談ついでにもう少し書いておこうと思います。

ワードプレスでホームページを運用する場合、投稿するブログ記事が主なコンテンツとなります。

ホームページに来てくれる方が価値を感じるコンテンツを作成し、アクセス解析などで効果を測りながら修正・改善を行って、アクセス数を増やしていくという運用が主な方法です。

なので、Googleなどの検索からやってきた方が情報を探しやすいように設計しておいた方が、運用しているホームページの価値が伝わりやすくなります。

そこで、もともとあるホームページ上への表示が簡単なカテゴリーやタグを訪れた方のために利用し、今回解説したカスタムタクソノミーをホームページを管理する側のために利用するという使い方を考えることができます。

ホームページを訪れた方が見やすい分類を元々の機能で設計し、カスタムタクソノミーで管理を楽にする設計を行うということです。

記事が増えて行けば過去に作成した記事のリライト作業が必要になる場合もあります。

また、気が付かないうちに内容がほぼ似たような、重複した記事を公開している場合もあります。

SEO対策上良くないとされている状況を避ける管理方法を、カスタムタクソノミーで実現できます。

このように、訪問者と管理者の双方にメリットがある機能なんですね。

カスタムタクソノミーでホームページの管理を楽に！

カスタムタクソノミーをホームページ上で表示するには、テンプレートを編集する必要があります。

なので、少し敷居の高い機能となってしまっていますが、ホームページの設計や管理方法を考えた時のメリットは大きいです。

また、将来的にホームページを拡張する時にも、すでにコンテンツを分類できているので設計し直す作業が比較的楽になります。

カスタム投稿の整理だけで使うのはもったいない機能です。

なので、少し調べればちょっとしたカスタマイズを行い、自分好みのWEBサイトにすることができます。

そうやって楽しみながらWEBサイトを運営できるのですが、ある日突然カスタマイズした内容が消えてしまった経験はないでしょうか？

自分はワードプレスを使い始めたばかりのころに経験したことがありますが、結構つらいものです。

「消えては実装し・・・」という作業を数回繰り返した記憶もあります。

今となっては良い思い出ですが、その当時に「子テーマ」の存在を知っていれば回避できてたんですけどね。

今回はその「子テーマ」についてです。

子テーマとは？

子テーマとは、ワードプレスで作成したWEBサイトで使用しているテーマのカスタマイズのために作成するテーマの事です。

作成すると言っても親テーマと関連付けるための準備をするだけなので、手間はかかりますがそこまで難しくはありません。

親テーマとは、子テーマの元となるテーマのことです。

特に専用のものはなく、ダッシュボードや配布先から入手する通常のテーマと同じです。

この通常のテーマの情報を元に子テーマを作成することで、親テーマという存在となります。

親テーマの分身が子テーマであると考えても良いです。

それでは、順を追って説明します。

なぜ子テーマが必要？

親テーマは、テーマ制作者が機能調整やセキュリティ対策などを実施した時に、ダッシュボードでバージョンアップが通知されます。

安全にワードプレスを使用するためにテーマのバージョンアップは欠かせませんが、適用すると元々あったファイルが書き換えられてしまいます。

つまり、親テーマのファイルで直接カスタマイズを行っているとその分が上書きされ、消えてしまうということです。

これが、ワードプレスを使い始めたばかりの頃の自分に起きていたことです。

そのような状況を回避できるのが子テーマというわけです。

子テーマは親テーマの内容をそのまま引き継いでいるとはいえ、テーマとしては別のものとなります。

なので、親テーマをバージョンアップしたとしても、子テーマの内容が上書きされることはありません。

常にテーマを最新の状態に保ちつつ、行ったカスタマイズを維持することが子テーマを使用することで可能となります。

また、テーマのファイルを直接編集する時に怖いのが、重要なコードを消してしまうことです。

テーマファイルの編集にあまり慣れていないと、おおよその位置で編集してしまい、表示する上で消してはいけないコードを消してしまう可能性があります。

そうすると、WEBサイトの表示が崩れてしまったり、最悪の場合エラーが起きてWEBサイトが表示されなくなってしまいます。

子テーマを使用していれば、そうなったとしても子テーマ自体もしくはカスタマイズしていたファイルを一度削除することで元に戻せます。

さらに、親テーマの中に元となるファイルは残ることになるので、カスタマイズのやり直しにも便利です。

子テーマを使うとこのようなメリットがあります。

公式でもカスタマイズした内容を維持する手段として子テーマの使用が推奨されています。

参照：WordPress Codex 日本語版「子テーマ」

子テーマの作り方

では、子テーマの作り方について書いて行きます。

作成前に確認して欲しいのが、使用しているテーマで専用の子テーマが配布されているかどうかです。

テーマによっては専用の子テーマを使用しないと正常に動かない場合もありますので、配布されている場合はその子テーマを利用するようにして下さい。

子テーマ作成の流れを簡単に説明すると、子テーマ用のフォルダを作成し、必要なファイルを用意してアップロードするという感じです。

今回は、例として公式テーマの「Twenty Twenty-One」の子テーマを作成してみます。

まずは、デスクトップにフォルダを作成しましょう。

名前は何でも良いですが、「[テーマ名]-child」というのが一般的です。

今回は「Twenty Twenty-One-child」とします。

次に必要なファイルを用意していきます。用意するものは2つです。

ここから先はプログラミングで使用するエディタを使用しますが、標準のメモ帳でも問題ありません。

その場合は「名前を付けて保存」を選び拡張子( .css、.phpなど)までファイル名に入力すればOKです。

・style.css

親テーマと関係がある子テーマである事をWordPressに知らせるために、子テーマ用のCSSファイルを作成します。

子テーマ作成の段階では、以下の情報を入力しておけば良いです。

/*
Theme Name: Twenty Twenty-One-child
Template: twentytwentyone
*/

Theme name：子テーマの名前を入力します。ここも「[テーマ名]-child」が無難です。

Template：親テーマがあるディレクトリ名を入力します。FTPソフトやレンタルサーバー業者が用意しているWEBファイルマネージャから確認できます。

ちなみに、親テーマのstyle.cssの最初に書いてある情報をコピペして、同じ部分だけを編集するのでも問題はありません。

/*
Theme Name: Twenty Twenty-One-child  ←ファイル名を変更
Template: twentytwentyone            ←親テーマのフォルダ名を入力
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

こんな感じです。

どちらでも入力した内容が間違っていなければ、正常に動いてくれます。

・functions.php

テーマの機能を定義するためのPHPファイルも子テーマ用のものを作成します。

この作成するfunctions.phpを使用して親テーマのstyle.cssを子テーマで読み込み、CSSが反映されるようにします。

つまり、ここの入力を間違えると親テーマのCSSが子テーマに反映されなくなるので注意しましょう。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles(){
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
 }
?>

細かい説明は省きますが、スタイルシートの親子関係を記述しておきます。

先ほど作成した子テーマで使用するstyle.cssは、cssのカスタマイズで使用する場合があります。

経験上、5行目の子テーマのstyle.cssを読み込む記述が無いと反映されなかったことがあったので、自分はおまじないのように毎回入力するようにしています。

functions.phpの編集時の注意点は、間違いがあると真っ白な画面になってしまうことですね。

よくある事ですが、最初はかなり焦ります。

だいたい、functions.phpの中のPHPの閉じタグが抜けていたり、全角スペースが混じっていたりします。

最近は「重大なエラー」と言う表記でお知らせしてくれるようになったのでまだ良いですが・・・

フォルダをサーバーにアップロードする

FTPソフトなどで直接アップロードもできますが、今回はダッシュボードからアップロードしてみます。

アップロード前の準備をまず行います。

作成したstyle.cssとfunctions.phpの2つのファイルを「Twenty Twenty-One-child」のフォルダに入れ、ZIP形式で圧縮します。

windows10の場合だと、右クリックして「送る＞圧縮(zip形式)フォルダー」で行えます。

その後、ワードプレスのダッシュボード画面を開きます。

開いたら「外観＞テーマ」に移動し、「テーマのアップロード」ボタンを押します。

その後ファイルの選択を押し、ファイルマネージャーから作成したzipファイルを選びます。

そして、「今すぐインストール」ボタンが押せばアップロードが始まります。

アップロードしたテーマがワードプレス内で展開される画面となり、終わった後に「テーマのページに戻る」というリンクを押しま

すると、テーマ一覧の中に作成した子テーマが表示されるようになります。

表記はstyle.cssに入力した「Theme Name」の名前になっています。

「透明で分かりにくいと思った場合」

 

アップロード時にPNG形式の画像ファイルを、作成した子テーマのフォルダに入れておくと他のテーマのようにサムネイルが表示されます。

親テーマとの関係性を分かりやすくするために、親テーマのディレクトリ内にある「screenshot.png」ファイルをダウンロードして使われるのが多いかなと思います。

作成したオリジナル画像でも、ファイル名を「screenshot.png」とすれば表示してくれます。

 

 

 

有効化したあと、実際のホームページにアクセスして表示を確認しましょう。

style.cssやfunctions.phpの内容に間違いが無ければ、親テーマと同じ状態で表示されます。

子テーマを使用しない場合？

先に書いた通り子テーマを利用することで、ワードプレスのカスタマイズを心配なく行えるようになりますが、カスタマイズの内容によっては子テーマを使用しない方が良い場合もあります。

それは、CSSの調整で十分なカスタマイズの場合です。

「外観＞カスタマイズ」で移動できるテーマカスタマイザーや、ブロックエディタのメニューにある「追加CSS」を利用で十分対応できるからです。

こちらの元々ある機能で追記したCSSは、親テーマがバージョンアップしたとしても内容は維持されます。

もちろんバージョンアップでタグの変更や構造の変更があればそれに合わせてCSSを変更する必要が出てきますが、そのような変更への対応は子テーマでもかわりません。

なので、まずは自分がやりたいカスタマイズが、CSSを調整するだけでも良いか確認してみましょう。

見た目のデザイン調整ではなく、コンテンツの配置自体の変更や機能の追加が必要な場合は子テーマを利用する方が良いです。

functions.phpを使用した機能追加やタグの挿入、single.phpやpage.phpといったテンプレートファイルのコード自体を変える必要があるといった場合です。

カスタム投稿タイプを使用し、WEBページ上で表示するためにテンプレートファイルを編集する必要がある時などですね。

1ページだけしっかりとカスタマイズしたい場合には、エレメンターというプラグインを使用するのも有りですね。

子テーマを使用することで自由なカスタマイズが可能となりますが、忘れてはいけないのはワードプレスでWEBサイトを作成した目的です。

コンテンツやブログでの情報発信が目的であれば、子テーマの作成といった手間がかかることをわざわざやる必要もないです。

・・・カスタマイズを始めると面白くなってきてついやってしまいますが。

なので、自分のやりたいカスタマイズがどのような方法で実現できるかを調べてから子テーマの作成を考えましょう。

子テーマでカスタマイズを気軽に！

子テーマを使う事で、ワードプレスで作成したWEBサイトのカスタマイズとその管理は楽になります。

とはいえ、最後に書いた通りで、カスタマイズの内容も含めて手間がかかるのは事実です。

もしカスタマイズをお考えの場合は、当社のような制作会社に相談してみるのも一つの手です。

当社では随時ご相談をお受けしております。

ワードプレスでWEBサイトを作った目的を見失わずに、ユーザーが使いやすいWEBサイトを用意できるようにしたいものです。

①人物写真には読者の注意を引きやすく、ホームページやページ上で取り扱って居る内容の印象を変えられる効果があること。

②人物写真の効果を上げるには、記事の目的とターゲット（想定している読者）に合った写真を使う事。

と言う効果を人が写っている写真を使用する事で狙えます。

今回の記事では、以上の効果を踏まえて、更に一歩進んだ人物写真の使い方を考えて見ます。

それは、写真に写っている人物の「視線」を使用し、読者を誘導する方法です。

相手の目を見て情報を収集するのが「人」です。

人物写真にも色々と種類がありますが、読者の注意を引きやすいのは、被写体の顔が写っている写真です。
それは、人間が他人の顔から多くの情報を得ようと、本能的に注意を向けてしまうからです。

そして、人の顔の中で一番情報を持っているものが「目」です。
ことわざでも「目は口ほどに物を言う」というのがあるくらいです。
他にも、心理状態を表すものとして、会話中の目の動きを見るということも言われます。

なので、人間は無意識のうちに多くの情報を得ようと、目に注目します。

そして、目のもっている情報の中で、相手が誘導されてしまうものは、「視線」です。

家族でも、恋人でも、子供でも、友人でも、相手が何を見ているか気になったことはありませんか？
その視線の先にあるものを、自分も確認してしまった経験は無いでしょうか？
確認しなくても、「何を見ているのかな？」と気になったことはありませんか？

これが、目の持つ誘導させる力です。

人物写真にも目が写っていれば、必ず「視線」が存在します。
その「視線」の方向や写し方によって、何らかのメッセージを伝えることができます。
なので、人物写真で表現されている「視線」をうまく利用すれば、写真を使用する効果を更に上げ、文章の内容を届けやすくなります。

では、実際にどのような効果を「視線」により生み出せるかを見てみましょう。

読者に向けた「視線」の効果

読者に「視線」を向けるということは、被写体が正面を向いているということです。

こういった写真が使われているのは、企業の代表挨拶で使用されていたり、採用ページの担当者や既に働いている方々の写真などでよく使われています。
WEBページでは無くても、雑誌のインタビュー記事でも使われています。

これは、企業理念や求める人物像、または、自分の主張など、被写体となった人自身が、読者に伝えたい重要なメッセージであることを伝えるために、読者と目が合うような写真を使用しているということです。

書いてある文章に気持ちが乗るという言い方でも良いかもしれません。

メッセージ性を強くする事ができるので、ホームページや記事に対する印象を作ることも出来ますし、記事を読んだ後の行動への後押しを促すこともできます。

また、目をアップにし「視線」をよりはっきりさせることで、さらに力強い印象を与えることが出来ます。

「視線」で「時間」を操作する

実際の時間を巻き戻したり、早めたりする事はもちろんできません。
ここで言う操作とは、視線による「時間」のイメージを読者に伝えることです。

良くある分かりやすい例が、子供の写真です。
子供を左下に配置して、「視線」を右上方向に向けた写真です。

このような写真を見ると、明るい、未来への希望のような印象を与えることが出来ます。
なので、「視線」の先には、前向きなメッセージが配置されていることが多い印象を受けます。

なので「視線」が右を向いている写真は、読者が「未来」をイメージしやすくなります。

逆に「視線」が左を向いている写真は、「過去」をイメージしやすくなります。

「過去」をイメージすると、背景にある歴史や歩みなどの重厚感を演出しやすくなります。
「伝統の製法」とか、「受け継がれる職人技」といった表記で使用すると、さらに効果的です。

また、「過去」のイメージから、達成感などの演出にも使えますね。

一つ注意があるとすれば、未来と過去は真逆のイメージであるということです。
未来は前向きな印象を与えられるのでポジティブなイメージですが、過去は逆にネガティブなイメージを与えかねません。

使い方によっては、読者に想定していたこととは違う印象を与えてしまうので、使い方には注意しましょう。

とはいえ、ネガティブな印象は、注意して欲しい事と言い換えられるので、注意喚起の表記で使用することは考えられます。

「視線」による「誘導」を行い、メッセージ性を強くする

視線を正面、つまり読者に向けることで、メッセージ性を強く出来る事は書いたとおりです。
今度は、その「視線」を読者に見て欲しいコンテンツの方に向けてみましょう。

「視線」のある人物写真で一番効果的な使用方法が、実はこの「視線」による「誘導」なのです。

最初の方に書いた、「この人が何を見ているか気になる」という効果を使い、自然と読者の視線を見て欲しい方向に「誘導」します。

例えば、こんな感じです。

このように、写真に写っている人物の「視線」の先にボタンを配置する事で、読者にどのような行動を取って欲しいかを伝える事が出来ます。

この効果については、様々な実験が今までにされてきていますが、被写体の人物よりもその「視線」の先に注意が集まりやすいという結果が実証しています。
読者の視線が自然と被写体の視線の先に集まっているということですね。

先ほどの画像では、ボタンにしましたがキャッチコピーなどの文章にすれば、伝えたいメッセージとして強く印象に残す事も可能です。

効果が高い分、使用する写真や使用するページは良く選ばなければなりません。
効果があるからと全ての使用する画像で誘導を考えると、読者は選択肢が多くなり迷ってしまいます。
また、ターゲットとなるページ読者の共感を得られるような被写体で無ければ、そもそも画像自体に興味を持たないかもしれません。自然と読者の目には入りますが、伝わるメッセージ性は弱くなります。

補足：好感を持ってもらいやすい、人物写真の被写体は？

性別、年齢、場合によっては国籍も関係無く、読者に好感を持ってもらいやすい被写体があります。

それは、赤ちゃんの写真と女性の写真です。

赤ちゃんの持っている、全体的に丸い特徴のフォルムから、かわいらしさや守ってあげたいといった気持ちを持つのは人類共通の印象のようです。

ベビー用品の広告では良く見かけますが、赤ちゃんが写っている写真の目線の先に、製造業者や販売業者のメッセージが添えられていたり、親の立場の読者に対し「赤ちゃんは〇〇を求めています」のようなメッセージを投げかけたりしています。

また、赤ちゃんと言えばこれから先に無数に広がる未来のイメージも持ってもらいやすいので、先に書いた時間の印象作用と合わせて、企業（というより技術の方が良さそうですが）の将来性を伝えることも出来るでしょう。

女性の写真については、安心感を与える効果があるため、好感を得やすい被写体と言えます。女性特有の曲線のあるフォルムにより、安心感を生み出す効果があるそうです。
また、男性も女性も、女性に対してはあまり威圧感や不快感という警戒心を持たないという心理作用もあるようです。

実際、読者に信用してもらいたかったり、ボタンを押したり問合せをする事に対し安心感を持って欲しいというページでは、女性の写真が良く使用されています。

作成するページの内容や、掲載する製品のイメージに赤ちゃんや女性が合うのであれば、積極的に使用するのも有りだと思います。

無理に使ってしまうと逆効果になる場合もあるので、見極めは大事です。

まとめ

人物写真は、モノや風景写真のように記事の雰囲気や印象を作るだけではありません。

これまで書いて来たように、読者に対し何らかのメッセージや取って欲しい行動を伝えることも出来ます。

どのような人物写真を使うのが良いかを判断する材料が、作成するページを読んで欲しい読者。つまり、「ターゲット」が誰か？ということになるわけです。

効果的なホームページの運営をするために、記事で使用する写真にも一貫性を持たせることで、自然と掲載している情報への信頼度が高まり、自社への信頼に繋がって行きます。

企業のホームページを見ると、トップページか用意されているご挨拶ページで、その会社の代表が顔写真付きで読者に対するメッセージを載せています。当社も工事部のホームページを作成するにあたり、弊社代表の顔写真入りのご挨拶ページを作成しました。

ホームページを公開後、初めて会う方によく言われるのが、「社長怖そうですね」という一言です。これはつまり、当社のホームページがその方の印象に残ったということでしょう。「怖そうな社長がいる会社」という印象です。（良い意味で書いてますよ！）

もし、会社の外観を写した写真だけを載せていたら、ただの「会社」という印象しか残らないかもしれません。

何が言いたいかと言うと、写真には人の注意を引き、印象を残す効果があるということです。その効果を一番発揮できる写真が、人物写真なのです。

人が写っているのと映っていない写真の差

ということで、この画像を見て下さい。

清々しい草原の画像ですね。

クリーンで環境に優しい工事を行っている事を伝えるための、イメージ画像としては問題は無いでしょう。ですが、イメージ画像以上の効果は無いという印象ですね。

なので、先ほどの画像に少し手を加えてみます。

いかがでしょうか？

印象がだいぶ変わったと思いませんか？

単なるイメージ画像から、安心感や親しみが生まれたと思います。
（ちなみに、当社代表取締役社長でございます。）

今ご覧頂いた時に感じた印象の差が、人物写真が与える効果というものです。

記事内のメリハリという意味では、イメージ写真だけでも良いとは思います。

しかし、写真の後に続く文章に興味が湧くかといわれると、人物写真の方が湧くのではないでしょうか？

「人が写っている写真」を使う効果

人物写真には、注意や興味を引き、それを持続させる力があります。

なぜかというと、人物写真を使う事で下記のような心理効果が働くからです。

①信頼感が生まれる

②安心感を与える

③親しみ易さを感じさせられる

④記憶に残りやすくなる

このような効果が生まれるには大きく2つの理由があります。

理由①：最も目を引く写真は、顔写真である

先ほど、風景写真と人物写真で受ける印象の違いを感じてもらいました。

今度は、どこに目が行くかを意識してもらいたいのですが・・・

先ほどと同じ画像です。たぶん大体の方が、文字を見て背景の画像を見てという目線の動きだと思います。

では、次は人物入りをもう一度見て下さい。

いかがでしょうか？

先ほどと違い、まず「顔」が目に入ったと思います。続いて、文字を読み背景を見るという流れではないでしょうか？

これは、人物写真だからということでは無く、人物の顔が写っているからです。

このブログでもよく使用しますが、手や顔半分だけ写っている写真も人物写真と言えば人物写真です。そのような写真の場合、最初に見て頂いた文字と風景だけの写真の様に、風景の一部として見てしまうと思います。

人物の顔が写っていると、写真から風景以上の情報を読み取ろうと脳が働き、人物の顔に注目するわけです。本能的に、人間の顔には感情や雰囲気などの情報が詰まっていることを知っているんですね。

つまり、人物写真は「興味」より強い「注意」を引く事ができるということです。

ホームページやブログを運営するに当たって、注意を引くことは重要なことなので、この効果を使わない手はありません。

理由②：ザイオンス効果(単純接触効果)を利用しやすい

心理的な効果として、ザイオンス効果(単純接触効果)というものがあります。

これは、同じ人やモノを見たり聞いたりする回数が増えるほど、その対象に対して好印象を持つ様になるという効果です。

「モノ」と書いた通りで、人物写真では無くても効果は出ます。

自分の例で言うと、ホームページの制作の際に使用したい機能について調べることがあります。調べる機能は毎回違いますが、同じブログやホームページを何回か見かけると、そのブログやホームページには自分の欲しい情報があると感じ良い印象を持ちます。

それは、同じデザインを何回か見かけることで起きたザイオンス効果とも言えます。

このザイオンス効果を発揮するには、単純に回数が必要です。なので、１回に働く効果を上げられれば、早い段階で好印象を持ってもらえるかもしれません。

先ほどの自分の例を出すと、インターネットで情報を検索してヒットするページがいつも同じで、見る度に自分が必要としてる内容がしっかり載っているとします。すると、そのホームページやブログに乗っている情報の信憑性がグッと上がり、その後も信用して見るようになります。

これと同じ事が写真にも言えると思います。

人物写真は写真のなかでも注意を引きやすいという話はしましたが、風景写真など他の写真に比べ、強い印象を読者に対して与える事ができると言えます。強い印象を与えた上での接触回数により、読者に与えたい印象を早い段階で伝えることが出来るようになります。

人物写真を使うことのメリット

以上の理由を踏まえると、人物写真を使うメリットは以下のようにまとめられます。

①読者の注意を引くことが出来る

②安心感・信頼感に繋がる

③同じ写真の接触回数が増えるので、写っている人物への親しみが生まれる

④ホームページや記事についての記憶が残りやすくなる

ホームページやブログを運営する場合、この４つのメリットは、集客や販売などを考えた場合必要なものです。ホームページやブログを運営する側は、集客や販売につなげるために様々な施策を考えるわけですが、その施策に人物写真を組み合わせる事で、目的を達成しやすくなるでしょう。

まとめ

人物写真を使用することで、自然と注目を集める事ができます。

画像を記事内に入れることで文章は読みやすくなりますが、人物写真を使うことで文章に対する期待感を持たせる事も出来ます。これは、文章にはできない画像が持つ力なので、ホームページやブログの運営にうまく役立てたいものです。