色々なサイトやブログを見ていると多くの場合、自分で作成した構成図の画像やスクリーンショットを貼り付けて表示させていて、CSSで表現しているのは見たことがありません。

　WordPressのブロックエディタにはブロックスタイルという機能が備わっていて、あらかじめ登録されているスタイルを自由に切り替える事ができます。そして、このブロックスタイルは一部のブロックでは自分で独自のスタイルを追加する事も可能になっています。

　そこで、今回はリストのブロックスタイルを追加して、CSSだけで簡単に構成図（ツリー構造図）を表現する方法を紹介します。

はじめに

　まずはテキストブロックのリストを使ってディレクトリの構成図を作ってみます。メニューで箇条書きか番号付きか選べますが、初期の状態では設定項目のスタイルには「デフォルト」しか表示されていないと思います。

リストのデフォルトスタイル

• 構成図（参考例）
• theme ▸
  • cocoon-child-master ▸
    • style.css
    • functions.php
    • amp.css
    • blocks ▾　←テーマ内に作成
      • css ▾　←下の階層に追加
        • block.style.css　←cssフォルダ内にファイルを置く
      • js ▾　←下の階層に追加
        • block.custom.js　←jsフォルダ内にファイルを置く
    • editor-style.css
    • skins ▸
    • javascript.js
    • tmp ▸
    • tmp-user ▸
  • 外のテーマ
• ※青色ですがリンクしておりません

これでも分からなくはないですが、ファイルやフォルダの親子関係が見ただけで分かるような構成図とは言えません。

表示例（スタイル適用後）

リストのスタイル設定にスタイルを追加しておく事で、いつでも簡単に

• 構成図（参考例）
• theme ▸
  • cocoon-child-master ▸
    • style.css
    • functions.php
    • amp.css
    • blocks ▾　←テーマ内に作成
      • css ▾　←下の階層に追加
        • block.style.css　←cssフォルダ内にファイルを置く
      • js ▾　←下の階層に追加
        • block.custom.js　←jsフォルダ内にファイルを置く
    • editor-style.css
    • skins ▸
    • javascript.js
    • tmp ▸
    • tmp-user ▸
  • 外のテーマ
• ※青色ですがリンクしておりません

のように表示させる事が出来ます。

ソースコード

CSSコード

以下のソースコードをstyle.cssに記述します。

/*カスタムブロックスタイル*/
/*ツリー構成図リストスタイル*/
.is-style-tree {
	list-style-type: none;
	display:block;
	position:relative;
	background-color:#eee;
	padding:30px;
	border:solid 1px #ccc;
	font-size:12px;
}

.is-style-tree li {
	line-height: 21px;
	margin: 0 !important;
}

.is-style-tree ul {
	display:block;
	position:relative;
	padding:0;
	padding-left:21px;
	padding-inline-start: 21px;
	margin: 0;
	margin-bottom: 10px !important;
}
 
.is-style-tree ul:before {
	content:"";
	position:absolute;
	top:-2px;
	bottom:0;
	left:-20px;
	width:0;
	border-left: 1px solid gray;
	margin-left:24px;
}
 
.is-style-tree ul li {
	display:block;
	position: relative;
}
 
.is-style-tree ul li:before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 0;
	left: -17px;
	width: 14px;
	height: 0;
	border-top: 1px solid gray;
}
 
.is-style-tree ul li:last-child:before {
	height: auto;
	background-color: #eee;
}

※色を自分好みに設定できます。※余白の調整は1px単位での微調整が必要になる場合があります。

　CSSコードについては下記の記事が大変参考になりました。思い通りに表示させる為、この記事で紹介しているCSSコードは修正を加えておりますが、構成図（ツリー構造図）を作る為にCSSで何をしているかの解説は下記の記事がとても分かりやすいです。是非ご参照ください。

TechAcademy [テックアカデミー]

大切なのは、誰から学ぶか。選抜された現役エンジニアから学ぶならテックアカデミー。

techacademy.jp

PHPコード

以下のコードを functions.php に追加します。

/*カスタムブロックスタイル*/
register_block_style(
    'core/list',
    array(
		'name' => 'tree',
		'label' => 'ツリー構造',
    )
);

これだけでリストのスタイルに「ツリー構造」と言う名前のスタイルが追加され、「デフォルト」と「ツリー構造」の切替が可能になります。

追加したスタイルには is-style-tree という名前のクラスが割当てられ、記述したCSSが適用されます。

実際の動作

実際の動作はこのようになります。

こうように瞬時に切り替えが可能

まとめ

　いかがだったでしょうか？

　この記事内での表示例では、WordPressのテーマエディタ風のカラーにしてみましたが、色の設定を変えるだけで、この記事のアイキャッチ画像のようにも出来ます。

　お使いのテーマによっては余白の調整が必要になるかもしれませんが、1px単位で微調整してみてください。

　スタイルはいくつも追加できるので、用途や使い方によって色や余白の設定を変えておけば、もっと便利にブロックエディタを使う事ができるのではないでしょうか？

　ツリー構造のディレクトリ構成図が必要な場面はあまり多くないかもしれませんが、こんなニッチな機能でもあると便利なんじゃないかと思います。

しかし、多くの場合、ABOUTページ（運営者や会社の情報）やCONTACTページ（お問い合わせ）など、ページ単体で完結している内容が殆どだと思います。

そのようなコンテンツの場合、「投稿日や更新日は不要だ」、「表示させたくない」と思う方も多いのではないでしょうか？

Cocoonでできる固定ページの設定について。

Cocoonでは様々な設定項目が標準で備わっていますが、固定ページで設定できる項目が

• コメント設定
  • 表示
• パンくずリスト設定
  • パンくずリストの配置
  • 記事タイトルの表示

だけとなっており、日付の表示設定がありません。

その為、WordPress初心者の方の中には、「どうやって消すのか？」「消し方が分からない。」という方もいるかもしれません。

そこで今回は、固定ページの投稿日・更新日を非表示にする方法を紹介します。

全ての固定ページの投稿日・更新日を非表示にする。

方法は簡単です。

子テーマのstyle.cssに以下のコードを追加します。

/*固定ページで投稿日・更新日を非表示*/
.page .date-tags {
 display: none;
}

これだけで、全ての固定ページの投稿日・更新日が非表示になります。

特定のページのみ投稿日・更新日を非表示にする。

Cocoonでは、各投稿・固定ページの記事編集画面で

のように、そのページ専用のCSSコードを入力できるようになっています。

カスタムCSSの入力欄はビジュアルエディタでもコードエディタでもどちらもコンテンツ編集画面の下にあります。

投稿日・更新日を非表示しにしたい固定ページの編集画面でカスタムCSSの入力欄に以下のコードを追加します。

/*投稿日・更新日を非表示*/
.date-tags {
 display: none;
}

入力が完了したら、更新して編集を完了します。

これで、このコードを追加したページは投稿日・更新日が表示されなくなります。

因みに、投稿ページでもこのコードを入力すると、投稿日・更新日を非表示にする事ができます。

ただ、個人的には、投稿ページについてはその記事の内容がいつ投稿されたものなのか？というのは大事な情報の１つだと思うので、投稿日か更新日のどちらかは表示しておく方が親切ではないかと思います。

まとめ

いかがだったでしょうか？

投稿日や更新日を非表示にする方法は他にもあると思いますが、今回は初心者向けにできるだけ簡単な方法を考えてみました。

Cocoon以外のテーマでも、カスタムCSSが使えるテーマは沢山あります。

固定ページや日付部分に与えられたCSSのクラス名を確認する事ができれば、他のテーマでも応用ができるのではないでしょうか。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

このテーマは、サイト公開時から使用させていただいてたテーマ【Simplicity2】の後継にあたるもので、【Simplicity2】も無料とは思えないほど高機能でしたが、さらに進化したテーマとなっています。

このサイトでは日付を英語表記に変えていましたが、テーマの変更に伴って全てリセットされてしまったので、改めてCocoonで日付を英語表記する方法について考えてみました。

日付の設定を変更する

まずはじめに、日付形式の設定を表示させたい形式に変更してみましょう。

日付や時刻のフォーマットについては以下のページをご確認ください。

日付と時刻の書式

日付と時刻の書式をカスタマイズする WordPress の関数の中には、the_date() や the_ti…

ja.wordpress.org

管理画面（ダッシュボード）から　Cocoon 設定　→　全体タブ　へ移動し、いちばん下の日付フォーマットの入力欄に

M jS, Y

と入力します。

管理画面（ダッシュボード）から　→　設定　→　一般設定　へ移動し、日付形式でカスタムを選択し、同じく入力欄に

M jS, Y

と入力します。

Cocoon では、Cocoon 設定の日付フォーマットを取得する

get_site_date_format()

という独自の関数を使っている為、WordPressの汎用的な関数　get_option()　を使ってPHPを書く場合はこちらも設定しておく必要があります。

日付フォーマットを取得するには　date_format　オプションを使用し

get_option( 'date_format' )

となります。

若干逸れましたが、話を元に戻してどのように表示されているか確認してみましょう。期待通りの表示なら

Jul 23th, 2020

のようになるはずです。

しかし、テーマ側の仕様にもよりますが日本語版のWordPressでは多くの場合

7月 23th, 2020

のように日本語に翻訳されて表示されてしまいます。Cocoonでも同様に、更新日以外の表記が日本語にローカライズされて表示されてしまいました。

それでは、どのように期待通りの表示にするのか順に見ていきます。

投稿日を英語に

まずはじめに、Cocoonではどの日付関連のテンプレートタグを使って投稿日を表示しているか確認してみましょう。

一覧で表示されるエントリーカードでは

the_time()

が使われていました。

the_time()　は投稿日時を表示するテンプレートタグで、この関数内では投稿日時を取得する　get_the_time()　というテンプレートタグが使われています。

表示と取得の違いは　echo　を使う必要が有るか無いかです。

次に、個別の投稿ページも確認してみたところ

get_the_date_tags()

という独自の関数が使われていることが分かったのですが、この関数の中身が確認できませんでした。

各ファイルをじっくり確認すれば見つかるかもしれませんが、時間が掛りそうなので、場所（ファイル）を特定するのは諦めました。。。

ただ、get_the_date_tags()　関数内でどのような処理がされているのかは確認できませんでしたが、

echo get_the_date_tags();

のように　echo　を使って投稿日と更新日を表示しているので、この関数内では　the_time()　は使っていないだろうと推測できます。また、例えば

echo get_the_time();

のように投稿日を表示している場合、the_time()　のフィルターフックを使っても期待通りの表示ができません。

そこで、この　get_the_time()　のフィルターフックを使って投稿日を英語表記に変える事にします。

ソースコード

子テーマの　functions.php　に次のコードを追加します。

/*日付の英語表記*/
function my_get_the_time($date){
	$transArray = array(
		"11月" => "Nov",
		"12月" => "Dec",
		"1月" => "Jan",
		"2月" => "Feb",
		"3月" => "Mar",
		"4月" => "Apr",
		"5月" => "May",
		"6月" => "Jun",
		"7月" => "Jul",
		"8月" => "Aug",
		"9月" => "Sep",
		"10月" => "Oct",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_the_time','my_get_the_time');

ちょっと強引ですが、ループ処理で置換えています。

もっとスマートな方法があれば誰か教えて欲しいところですが、現状不具合等出ていないので暫くはこれで良いかなと思っています。

フルスペルで表示させたい場合等は$valueの値を”Nov”のような省略型から”November”など好きな表示に変えてください。

月表示の配列の順番が気になる方もいると思いますが、“11月”と”12月”は必ず最初に並べてください。

1月から順番に並べた時に起こる不具合について

この関数で行っている事は、受け取った値を順番に突き合わせして該当した場合に英語に置換えて表示しています。その為、1月から順番に並べた場合”1月”や”2月”に該当する部分が先に置き換えられてしまうので、

“11月”　は　”1Jan”　に

“12月”　は　”1Feb”　に

それぞれ変換されてしまいます。

その他の方法（Cocoon以外の汎用的な例）

投稿日を英語で表記する方法は

日本語版WordPressで日付を英語表記する方法

投稿日を英語表記するWordPressの日付や時刻に関するテンプレートタグについてWordPressには日付や時刻に関するテンプレートタグや関数が多数用意されています。the_time()get_the_time()the_date()ge...

www.nobutstyle.com

Apr 15th, 2017

でも書きましたが、フィルターフックを使って　functions.php　に次のコードを追加します。

/*投稿日を英語で表示*/
add_filter( 'the_time','my_date_format');
//テーマによっては↓を採用
//add_filter( 'get_the_date','my_date_format');
function my_date_format(){
 $my_date_format = get_post_time(get_option( 'date_format' ));
 return $my_date_format;
}

get_post_time()

は日付をローカライズせずに値を返してくれます。

Cocoonの場合、インデックスページ等の一覧ページに表示されるエントリーカードの投稿日は英語に変わるものの、個別の投稿ページや固定ページの投稿日は変わりませんでした。

get_the_time()　のフィルターフックでも試してみたところ、投稿日はどちらも英語で表示できましたが、独自関数　get_the_date_tags()　の影響なのか更新日が表示されなくなってしまう為、先に紹介した方法に落ち着きました。

使用するフィルターフックについてはテーマ側でどの日付関連のテンプレートタグを使っているかで変わってくると思いますが、ここで紹介した方法はどちらも他のテーマでも応用できるのではないかなと思います。

更新日を英語に

Cocoonの更新日の表示について

Cocoonの場合、日付形式の設定変更だけで更新日の表示が英語表記に変わりました。

その為、更新日については何もすることはありませんが、今後のWordPressやCocoonのバージョンアップによって仕様が変わる可能性が無いわけではありません。

その他の方法（Cocoon以外の汎用的な例）

フィルターフックを使って　functions.php　に次のコードを追加します。

/*更新日を英語で表示*/
add_filter( 'get_the_modified_time','my_mdate_format');
function my_mdate_format(){
	$my_mdate_format = get_post_modified_time(get_option( 'date_format' ));
	return "$my_mdate_format";
}

get_post_modified_time()

は日付をローカライズせずに値を返してくれます。

コメントの日付を英語に

Cocoonデフォルトウィジェットの「[C] 最近のコメント」を使用している場合、ここにもコメントした日付が表示されます。また各個別投稿ページに表示されるコメントにも日付や時間が表示されているので、ここも英語表記に変えていきたいと思います。

コメントの日付を取得する関数について

まずはじめに、コメントの日付を表示する　comment_date()　テンプレートタグとその中で使われているフィルターフック　get_comment_date()　の中身を確認してみたいと思います。

function get_comment_date( $d = '', $comment_ID = 0 ) {
        $comment = get_comment( $comment_ID );
        if ( '' == $d ) {
                $date = mysql2date( get_option( 'date_format' ), $comment->comment_date );
        } else {
                $date = mysql2date( $d, $comment->comment_date );
        }
        /**
         * Filters the returned comment date.
         *
         * @since 1.5.0
         *
         * @param string|int $date    Formatted date string or Unix timestamp.
         * @param string     $d       The format of the date.
         * @param WP_Comment $comment The comment object.
         */
        return apply_filters( 'get_comment_date', $date, $d, $comment );
}

/**
 * Display the comment date of the current comment.
 *
 * @since 0.71
 * @since 4.4.0 Added the ability for `$comment_ID` to also accept a WP_Comment object.
 *
 * @param string         $d          Optional. The format of the date. Default user's settings.
 * @param int|WP_Comment $comment_ID WP_Comment or ID of the comment for which to print the date.
 *                                   Default current comment.
 */
function comment_date( $d = '', $comment_ID = 0 ) {
        echo get_comment_date( $d, $comment_ID );
}

この　get_comment_date()　関数内で使われている　mysql2date()　関数が曲者で、パラメータ　$translate に　false　を指定していない場合データベースから受け取った値をローカライズして返します。

また、この　mysql2date()　関数はWordPressのフィルターフックではない為、get_comment_date()　のフィルターフックを使って取得した日付を強引に変換する必要があります。

ソースコード

やり方は「投稿日を英語に」で紹介した方法と同じです。

functions.php　に以下のように記述します。

function my_comment_date($date){
	$transArray = array(
		"11月" => "Nov",
		"12月" => "Dec",
		"1月" => "Jan",
		"2月" => "Feb",
		"3月" => "Mar",
		"4月" => "Apr",
		"5月" => "May",
		"6月" => "Jun",
		"7月" => "Jul",
		"8月" => "Aug",
		"9月" => "Sep",
		"10月" => "Oct",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_comment_date', 'my_comment_date');

コメント時間も英語に

各個別投稿ページに表示されるコメントには時間も表示されますが、24時間表記にしていない場合「午前」や「午後」と表示されてしまうので、これを「AM」や「PM」に変えます。

同じように、functions.php　に以下のように記述します。

function my_comment_time($date){
	$transArray = array(
		"午前" => "AM",
		"午後" => "PM",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_comment_time', 'my_comment_time');

アーカイブウィジェットを英語に

このサイトではCocoon開発者わいひらさんのブログ

折り畳み式アーカイブウィジェットを作成するWordPressカスタマイズ方法。プラグイン不要コピペのみ。

今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと…

nelog.jp

の記事を参考に折り畳み式のアーカイブウィジェットを作成し、そのコードをアレンジして英語で表示しています。

動作については、このサイトのサイドバーにある「MONTHLY ARCHIVES」（アーカイブウィジェット）でご確認ください。

主な手順

参考記事に習い以下の手順で進めます。

1. style.cssにCSSを記述（コピペでＯＫ！）
2. javascript.jsにjQueryコードを記述（コピペでＯＫ！）

style.cssに記述（コピペ）するCSSについて

style.css　に以下のコードを記述

/************************************
** 折り畳みアーカイブウィジェット
************************************/
.widget_archive a.year{
	cursor: pointer;
}

.widget_archive .years ul {
	-webkit-transition: .3s ease;
	transition: transform .3s ease;
	margin: 0;
	margin-bottom: 1em;
}

/*アーカイブウィジェットとカテゴリウィジェットの共通スタイル*/
#sidebar .widget_archive ul.years li,#sidebar .widget_categories ul li {
 	margin-bottom: 0;
 	line-height:1.5em;
	padding-left:12px;
}

ここで注目して欲しいのは、参考記事では非表示させる為に

.widget_archive ul.years .hide {
  margin: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

のようにしていましたが、ここではここではその記述が無い点です。

参考記事で紹介しているjQueryコードでは

//直近の年の最初以外は.hide
        acv.find("ul.years ul:not(:first)").addClass("hide");

のように、直近の年の最初以外に　hide　という名前のクラスを付けた上で、開閉のアニメーションに

toggleClass("hide")

を使って　hide　という名前のクラスの有無を切り替える事で表示・非表示を切り替えていましたが、動きがあまり滑らかではなくカクカクした感じだったので、好みの動作になるように

toggle()

を使って実装しています。

このメッソドを実行すると、インラインで　display:block;　と　display:none;　の切り替えを行う為　visibility: hidden;　を使った場合、display:block;　のスタイルが適用されても、visibility: hidden;　が上書きされず非表示のままになってしまいます。

javascript.jsに記述（コピペ）するjQueryコードについて

javascript.jsに以下のコードを記述

/////////////////////////////////
// 折り畳み式アーカイブウィジェット
/////////////////////////////////
(function($) {
  $(function() {
    var wgts = $(".widget_archive");//アーカイブウィジェット全てを取得
    //アーカイブウィジェットを1つずつ処理する
    wgts.each(function(i, el) {
      var wgt = $(el);

      //日付表示＋投稿数か
      var has_date_count = wgt.text().match(/\d+年\d+月\d+/);
      //日付表示だけか
      var has_date_only = wgt.text().match(/\d+年\d+月/) && !has_date_count;

      //日付表示されているとき（ドロップダウン表示でない時）
      if ( has_date_count || has_date_only ) {
        var
          clone = wgt.clone(),//アーカイブウィジェットの複製を作成
          year = [];
        //クローンはウィジェットが後にに挿入。クローンはcssで非表示
        wgt.after(clone);
        clone.attr("class", "archive_clone").addClass('hide');

        var
          acv = wgt, //ウィジェット
          acvLi = acv.find("li"); //ウィジェット内のli全て
        //ul.yearsをアーカイブウィジェット直下に追加してそのDOMを取得
        var acv_years =  acv.append('
').find("ul.years");
 
        //liのテキストから年がどこからあるかを調べる
        acvLi.each(function(i) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示＋投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月(\d+)/;
          }
          var dt = $(this).text().match(reg);
          year.push(dt[1]);

        });
        $.unique(year); //重複削除

        acvLi.unwrap(); //liの親のulを解除

        //投稿年があるだけ中にブロックを作る
        var
          yearCount = year.length,
          monthCount = 0,
          ii = 0;
        while (ii < yearCount) {
          acvLi.each(function() {
            if ( has_date_count ) {
              reg = /(\d+)年(\d+)月(\d+)/;
            }
            var
            dt = $(this).text().match(reg);
            //月の追加
            if (year[ii] === dt[1]) {
              monthCount = monthCount + Number(dt[3]);
            }
          });
          acv_years.append('
for ' + year[ii] + " (" + monthCount + ')
');
 monthCount = 0;
          ii++;
        }

        //作ったブロック内のulに内容を整形して移動
        //オリジナルのクローンは順番に削除
        var j = 0;
        acvLi.each(function(i, el) {
          var reg = /(\d+)年(\d+)月/;
          //日付表示＋投稿数か
          if ( has_date_count ) {
            reg = /(\d+)年(\d+)月(\d+)/;
          }
          var
            dt = $(this).text().match(reg),
            href = $(this).find("a").attr("href"),
            month = {
              "1":"January",
              "2":"February",
              "3":"March",
              "4":"April",
              "5":"May",
              "6":"June",
              "7":"July",
              "8":"August",
              "9":"September",
              "10":"October",
              "11":"November",
              "12":"December",
            };
          //月の追加
          var rTxt = '
' + "" + month[dt[2]];
          //日付表示＋投稿数か
          if ( has_date_count ) {
            rTxt += ' (' + dt[3] + ")" + '
'; //投稿数の追加
          }
 rTxt += "";
          //作成した月のHTMLを追加、不要なものは削除
          if (year[j] === dt[1]) {
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          } else {
            j++;
            acv_years.find(".year_" + year[j] + " ul").append(rTxt);
            $(this).remove();
          }
        });

        //クローン要素を削除
        clone.remove();

        //直近の年の最初以外は非表示
        acv.find("ul.years ul:not(:first)").css("display","none");

        //年をクリックでトグルshow
        acv.find("a.year").on("click", function() {
 $(this).next().toggle(300);
        });
      }//if has_date_count || has_date_only
    });//wgts.each

  });

})(jQuery);

内容としては、取得したアーカイブウィジェトのHTMLソースから　○年○月記事数　となっている部分の数字だけを取り出し、必要な処理を加えてHTMLソースを整形し直ています。

63行目は年の部分の整形後のHTMLソースでブラウザ上では

for 2020 (1)

のように表示されます。

94~100行目は月の部分の整形後のHTMLソースでブラウザ上では

July (1)

のように表示されます。

116行目はクラスを付加せずに、インラインでCSSスタイルを追加しています。

//直近の年の最初以外は非表示
        acv.find("ul.years ul:not(:first)").css("display","none");

これにclickアクションのアニメーションとCSSによるスタイルを適用して表示しています。

アーカイブページのタイトルを英語に

アーカイブページのタイトルについては、テーマ側でフォーマットを固定してしまっている為、簡単に変更ができません。

そこで、アーカイブタイトルを取得する関数を丸ごと　functions.php　に記述し、フォーマットを直接編集します。

ソースコード

/*アーカイブタイトル英語化（アーカイブタイトルの取得を上書き）*/
if ( !function_exists( 'get_archive_chapter_title' ) ):
function get_archive_chapter_title(){
  $chapter_title = null;
  if( is_category() ) {//カテゴリページの場合
    $cat_id = get_query_var('cat');
    $icon_font = '';
    if ($cat_id && get_the_category_title($cat_id)) {
      $chapter_title .= $icon_font.get_the_category_title($cat_id);
    } else {
      $chapter_title .= single_cat_title( $icon_font, false );
    }
  } elseif( is_tag() ) {//タグページの場合
    $tag_id = get_query_var('tag_id');
    $icon_font = '';
    if ($tag_id && get_the_tag_title($tag_id)) {
      $chapter_title .= $icon_font.get_the_tag_title($tag_id);
    } else {
      $chapter_title .= single_tag_title( $icon_font, false );
    }
  } elseif( is_tax() ) {//タクソノミページの場合
    $chapter_title .= single_term_title( '', false );
  } elseif( is_search() ) {//検索結果
    $search_query = trim(strip_tags(get_search_query()));
    if (empty($search_query)) {
      $search_query = __( 'キーワード指定なし', THEME_NAME );
    }
    $chapter_title .= '"'.$search_query.'"';
  } elseif (is_day()) {
    //年月日のフォーマットを取得
    $chapter_title .= ''.get_post_time('F jS, Y');//フォーマット変更（Fはフルスペル英語表記）
  } elseif (is_month()) {
    //年と月のフォーマットを取得
    $chapter_title .= ''.get_post_time('F Y');//フォーマット変更（Fはフルスペル英語表記）
  } elseif (is_year()) {
    //年のフォーマットを取得
    $chapter_title .= ''.get_the_time('Y');
  } elseif (is_author()) {//著書ページの場合
    $chapter_title .= ''.esc_html(get_queried_object()->display_name);
  } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
    $chapter_title .= 'Archives';
  } else {
    $chapter_title .= 'Archives';
  }
  return apply_filters('get_archive_chapter_title', $chapter_title);
}
endif;

31行目の　get_post_time(‘Y-m-d’)　と　34行目の　get_post_time(‘Y-m’)　を表示させたいフォーマットに変更します。

コメントアウトで上書きと書いていますが、実際の処理はアーカイブタイトルを取得する関数　get_archive_chapter_title()　を　functions.php　に記述することで、ここに書いた内容が優先的に実行されます。

本体のソース読込時には　!function_exists()　で関数が定義済かをチェックしているので、競合することはありません。

ブログカード（内部リンク）の日付を英語に

Cocoonでは簡単にブログカード型のリンクを設置することができますが、内部リンクのブログカードの場合、Cocoon 設定で投稿日または更新日を表示させることが可能となっています。

日付表示を投稿日または更新日に設定している場合に、この日付も月の表示が日本語に翻訳されてしまうので、ここも英語に変えていきます。

Cocoonではブログカードの日付を取得する為に、mysql2date()　関数が使われています。

「コメントの日付を英語に」でも触れましたが、この関数はパラメータ$translate　に　false　を指定していない場合データベースから受け取った値を強制的に翻訳して返します。

そこで、ブログカードタグを取得する関数を丸ごと　functions.php　に記述し、パラメータ　$translate　に　false　を指定します。

ソースコード

以下のコードを　functionns.php　に記述します。

//ブログカードの日付英語化（内部URLからブログカードタグの取得を上書き）
if ( !function_exists( 'url_to_internal_blogcard_tag' ) ):
function url_to_internal_blogcard_tag($url){
  if ( !$url ) return;
  $url = strip_tags($url);//URL
  $id = url_to_postid( $url );//IDを取得（URLから投稿ID変換）
  //内部ブログカード作成可能なURLかどうか
  if ( !is_internal_blogcard_url($url) ) return;
  //_v($url);

  $no_image = get_no_image_160x90_url();
  if (!$no_image) {
    $no_image = get_site_screenshot_url($url);
  }

  $thumbnail = null;
  $date_tag = null;
  //投稿・固定ページの場合
  if ($id) {
    //global $post;
    $post_data = get_post($id);
    setup_postdata($post_data);
    wp_reset_query();

    $title = $post_data->post_title;//タイトルの取得

    //メタディスクリプションの取得
    $snippet = get_the_page_meta_description($id);

    //投稿管理画面の抜粋を取得
    if (!$snippet) {
      $snippet = $post_data->post_excerpt;
    }
    //All in One SEO Packのメタディスクリプションを取得
    if (!$snippet) {
      $snippet = get_the_all_in_one_seo_pack_meta_description($id);
    }
    //記事本文の抜粋文を取得
    if (!$snippet) {
      $snippet = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length());
    }
    $snippet = preg_replace('/\n/', '', $snippet);

    //日付表示
    $date = null;
    $post_date = mysql2date(get_site_date_format(), $post_data->post_date,false);//falseで翻訳無効に
    switch (get_internal_blogcard_date_type()) {
      case 'post_date':
        $date = $post_date;
        break;
      case 'up_date':
        $date = mysql2date(get_site_date_format(), $post_data->post_modified,false);//falseで翻訳無効に
        if (!$date) {
          $date = $post_date;
        }
        break;
    }
    if (is_internal_blogcard_date_visible()) {
      $date = '
'.$date.'
';//日付の取得
      $date_tag = '
'.$date.'
';
    }


    //サムネイルの取得（要160×90のサムネイル設定）
    $thumbnail = get_the_post_thumbnail($id, get_internal_blogcard_thumbnail_size(), array('class' => 'blogcard-thumb-image internal-blogcard-thumb-image', 'alt' => ''));

  } elseif (is_home_url($url)){
    //トップページの場合
    $title = get_front_page_title_caption();
    $snippet = get_front_page_meta_description();
    $image = get_ogp_home_image_url();
    if (!empty($image)) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  } elseif ($cat = get_category_by_path($url, false)){
    //カテゴリページの場合
    $cat_id = $cat->cat_ID;

    $title = get_the_category_title($cat_id);
    $snippet = get_the_category_snippet($cat_id);
    $image = get_the_category_eye_catch_url($cat_id);

    if ($image) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  } elseif ($tag = url_to_tag_object($url)) {
    $tag_id = $tag->term_id;
    $title = get_the_tag_title($tag_id);
    $snippet = get_the_tag_snippet($tag_id);
    $image = get_the_tag_eye_catch_url($tag_id);

    if ($image) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  }
  //タイトルのフック
  $title = apply_filters('cocoon_blogcard_title',$title);
  $title = apply_filters('cocoon_internal_blogcard_title',$title);
  //スニペットのフック
  $snippet = apply_filters( 'cocoon_blogcard_snippet', $snippet );
  $snippet = apply_filters( 'cocoon_internal_blogcard_snippet', $snippet );

  //サムネイルが存在しない場合
  if ( !$thumbnail ) {
    $thumbnail = get_blogcard_thumbnail_image_tag($no_image);
  }

  //ブログカードのサムネイルを右側に
  $additional_class = get_additional_internal_blogcard_classes();

  //新しいタブで開く場合
  $target = is_internal_blogcard_target_blank() ? ' target="_blank" rel="noopener"' : '';

  //ファビコン
  $favicon_tag =
  '
'.
    ''.
  '
';

  //サイトロゴ
  $domain = get_domain_name(punycode_decode($url));
  $site_logo_tag = '
'.$domain.'
';
  $site_logo_tag = '
'.$favicon_tag.$site_logo_tag.'
';

  //取得した情報からブログカードのHTMLタグを作成
  //_v($url);
  $tag =
  ''.
    '
'.
      '
'.
        ''.
      '
'.
      '
'.$thumbnail.'
'.
      '
'.
        '
'.$title.'
'.
        '
'.$snippet.'
'.

      '
'.
      '
'.
        $site_logo_tag.$date_tag.
      '
'.
    '
'.
  '';

  return $tag;
}

ここでも、内部URLからブログカードを取得する関数　url_to_internal_blogcard_tag()　を丸ごと　functions.php　に記述し、ここに書いた内容を優先的に実行させます。

46行目と52行目で使われているmysql2date()でパラメータ$translateにfalseを指定し翻訳を無効にします。

まとめ

しばらく新規記事の投稿をしておりませんでしたが、ありがたい事に

日本語版WordPressで日付を英語表記する方法

投稿日を英語表記するWordPressの日付や時刻に関するテンプレートタグについてWordPressには日付や時刻に関するテンプレートタグや関数が多数用意されています。the_time()get_the_time()the_date()ge...

www.nobutstyle.com

Apr 15th, 2017

の記事にはちょこちょこと新規のユーザーさんのアクセスもある事から、日本語環境でも日付だけ英語で表示させたい方が少なからずいるんだなと思い、今回Cocoonで日付を英語で表記する方法についてまとめました。

最後にCocoonで日付を英語にするためのコードをまとめます。

/*記事投稿日の英語表記*/
function my_get_the_time($date){
	$transArray = array(
		"11月" => "Nov",
		"12月" => "Dec",
		"1月" => "Jan",
		"2月" => "Feb",
		"3月" => "Mar",
		"4月" => "Apr",
		"5月" => "May",
		"6月" => "Jun",
		"7月" => "Jul",
		"8月" => "Aug",
		"9月" => "Sep",
		"10月" => "Oct",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_the_time','my_get_the_time');

/*コメント投稿日の英語表記*/
function my_comment_date($date){
	$transArray = array(
		"11月" => "Nov",
		"12月" => "Dec",
		"1月" => "Jan",
		"2月" => "Feb",
		"3月" => "Mar",
		"4月" => "Apr",
		"5月" => "May",
		"6月" => "Jun",
		"7月" => "Jul",
		"8月" => "Aug",
		"9月" => "Sep",
		"10月" => "Oct",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_comment_date', 'my_comment_date');

/*コメント投稿時間の英語表記*/
function my_comment_time($date){
	$transArray = array(
		"午前" => "AM",
		"午後" => "PM",
	);
	foreach($transArray as $key => $value) {
		$date = str_replace("$key", $value, $date);
	}
	return $date;
}
add_filter('get_comment_time', 'my_comment_time');

/*アーカイブタイトル英語化（アーカイブタイトルの取得を上書き）*/
if ( !function_exists( 'get_archive_chapter_title' ) ):
function get_archive_chapter_title(){
  $chapter_title = null;
  if( is_category() ) {//カテゴリページの場合
    $cat_id = get_query_var('cat');
    $icon_font = '';
    if ($cat_id && get_the_category_title($cat_id)) {
      $chapter_title .= $icon_font.get_the_category_title($cat_id);
    } else {
      $chapter_title .= single_cat_title( $icon_font, false );
    }
  } elseif( is_tag() ) {//タグページの場合
    $tag_id = get_query_var('tag_id');
    $icon_font = '';
    if ($tag_id && get_the_tag_title($tag_id)) {
      $chapter_title .= $icon_font.get_the_tag_title($tag_id);
    } else {
      $chapter_title .= single_tag_title( $icon_font, false );
    }
  } elseif( is_tax() ) {//タクソノミページの場合
    $chapter_title .= single_term_title( '', false );
  } elseif( is_search() ) {//検索結果
    $search_query = trim(strip_tags(get_search_query()));
    if (empty($search_query)) {
      $search_query = __( 'キーワード指定なし', THEME_NAME );
    }
    $chapter_title .= '"'.$search_query.'"';
  } elseif (is_day()) {
    //年月日のフォーマットを取得
    $chapter_title .= ''.get_post_time('F jS, Y');//フォーマット変更（Fはフルスペル英語表記）
  } elseif (is_month()) {
    //年と月のフォーマットを取得
    $chapter_title .= ''.get_post_time('F Y');//フォーマット変更（Fはフルスペル英語表記）
  } elseif (is_year()) {
    //年のフォーマットを取得
    $chapter_title .= ''.get_the_time('Y');
  } elseif (is_author()) {//著書ページの場合
    $chapter_title .= ''.esc_html(get_queried_object()->display_name);
  } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {
    $chapter_title .= 'Archives';
  } else {
    $chapter_title .= 'Archives';
  }
  return apply_filters('get_archive_chapter_title', $chapter_title);
}
endif;

/*ブログカードの日付英語化（内部URLからブログをカードタグの取得を上書き）*/
if ( !function_exists( 'url_to_internal_blogcard_tag' ) ):
function url_to_internal_blogcard_tag($url){
  if ( !$url ) return;
  $url = strip_tags($url);//URL
  $id = url_to_postid( $url );//IDを取得（URLから投稿ID変換）
  //内部ブログカード作成可能なURLかどうか
  if ( !is_internal_blogcard_url($url) ) return;
  //_v($url);

  $no_image = get_no_image_160x90_url();
  if (!$no_image) {
    $no_image = get_site_screenshot_url($url);
  }

  $thumbnail = null;
  $date_tag = null;
  //投稿・固定ページの場合
  if ($id) {
    //global $post;
    $post_data = get_post($id);
    setup_postdata($post_data);
    wp_reset_query();

    $title = $post_data->post_title;//タイトルの取得

    //メタディスクリプションの取得
    $snippet = get_the_page_meta_description($id);

    //投稿管理画面の抜粋を取得
    if (!$snippet) {
      $snippet = $post_data->post_excerpt;
    }
    //All in One SEO Packのメタディスクリプションを取得
    if (!$snippet) {
      $snippet = get_the_all_in_one_seo_pack_meta_description($id);
    }
    //記事本文の抜粋文を取得
    if (!$snippet) {
      $snippet = get_content_excerpt($post_data->post_content, get_entry_card_excerpt_max_length());
    }
    $snippet = preg_replace('/\n/', '', $snippet);

    //日付表示
    $date = null;
    $post_date = mysql2date(get_site_date_format(), $post_data->post_date,false);//falseで翻訳無効に
    switch (get_internal_blogcard_date_type()) {
      case 'post_date':
        $date = $post_date;
        break;
      case 'up_date':
        $date = mysql2date(get_site_date_format(), $post_data->post_modified,false);//falseで翻訳無効に
        if (!$date) {
          $date = $post_date;
        }
        break;
    }
    if (is_internal_blogcard_date_visible()) {
      $date = '
'.$date.'
';//日付の取得
      $date_tag = '
'.$date.'
';
    }


    //サムネイルの取得（要160×90のサムネイル設定）
    $thumbnail = get_the_post_thumbnail($id, get_internal_blogcard_thumbnail_size(), array('class' => 'blogcard-thumb-image internal-blogcard-thumb-image', 'alt' => ''));

  } elseif (is_home_url($url)){
    //トップページの場合
    $title = get_front_page_title_caption();
    $snippet = get_front_page_meta_description();
    $image = get_ogp_home_image_url();
    if (!empty($image)) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  } elseif ($cat = get_category_by_path($url, false)){
    //カテゴリページの場合
    $cat_id = $cat->cat_ID;

    $title = get_the_category_title($cat_id);
    $snippet = get_the_category_snippet($cat_id);
    $image = get_the_category_eye_catch_url($cat_id);

    if ($image) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  } elseif ($tag = url_to_tag_object($url)) {
    $tag_id = $tag->term_id;
    $title = get_the_tag_title($tag_id);
    $snippet = get_the_tag_snippet($tag_id);
    $image = get_the_tag_eye_catch_url($tag_id);

    if ($image) {
      $thumbnail = get_blogcard_thumbnail_image_tag($image);
    }
  }
  //タイトルのフック
  $title = apply_filters('cocoon_blogcard_title',$title);
  $title = apply_filters('cocoon_internal_blogcard_title',$title);
  //スニペットのフック
  $snippet = apply_filters( 'cocoon_blogcard_snippet', $snippet );
  $snippet = apply_filters( 'cocoon_internal_blogcard_snippet', $snippet );

  //サムネイルが存在しない場合
  if ( !$thumbnail ) {
    $thumbnail = get_blogcard_thumbnail_image_tag($no_image);
  }

  //ブログカードのサムネイルを右側に
  $additional_class = get_additional_internal_blogcard_classes();

  //新しいタブで開く場合
  $target = is_internal_blogcard_target_blank() ? ' target="_blank" rel="noopener"' : '';

  //ファビコン
  $favicon_tag =
  '
'.
    ''.
  '
';

  //サイトロゴ
  $domain = get_domain_name(punycode_decode($url));
  $site_logo_tag = '
'.$domain.'
';
  $site_logo_tag = '
'.$favicon_tag.$site_logo_tag.'
';

  //取得した情報からブログカードのHTMLタグを作成
  //_v($url);
  $tag =
  ''.
    '
'.
      '
'.
        ''.
      '
'.
      '
'.$thumbnail.'
'.
      '
'.
        '
'.$title.'
'.
        '
'.$snippet.'
'.

      '
'.
      '
'.
        $site_logo_tag.$date_tag.
      '
'.
    '
'.
  '';

  return $tag;
}
endif;

アーカーブウィジェットについてはCSSとjQueryで実装しているので「アーカイブウィジェットを英語に」を参照してください。

今回の内容についてはCocoonのカスタマイズとして書いていますので、他のテーマではそのままでは動作しない可能性があります。他のテーマで応用する場合はテーマ内で使われている関数等よく理解した上で、ご自身の責任のもと行ってください。

「別に気にしなくてもイイじゃん！」と言われるかもしれませんが、サイト全体のテイストを考えるとやっぱり気になる．．．。
細かいところですが、気する人も多いはず！そう思ったのでその対処法をまとめます。

最初にやってみたこと

これを修正するためにまず思い浮かんだのは「Poedit」のような翻訳ファイル編集ソフト

Poedit - Translation Editor for PO, XLIFF, JSON & More

Professional translation editor for PO, XLIFF, JSON, Qt and Flutter with machine translation, pre-translation and smart ...

poedit.net

これを使って翻訳ファイルを編集し再アップロードすること。

「Poedit」の使い方についてはそのうち記事を書いてみようかなとも思いますが、調べればいっぱい出てくると思うのでここでは割愛します。
とりあえずダウンロードしてインストールが完了したら wordpress-popular-posts-ja.po ファイルを開いて「1 view」の行の翻訳をクリア（削除）するか「ビュー」を「views」に変えればOKです。

更に

Crayon Syntax Highlighter 導入！重い？日本語表示は？

今更ですが...「Crayon Syntax Highlighter」を導入しました。現在僕が使用しているWordPressテーマの「Simplicity2」は標準（プラグイン無し）で「highlight.js」が使えます。詳しくはこちら↓...

www.nobutstyle.com

Apr 7th, 2017

の追記で書いたように強制的に翻訳ファイルの読み込み場所を指定してやれば今後の更新に影響されないのでは？
そう思ってやってみたところ、最初は上手くいきました。最初は．．．

ところが、対処方法の記事の下書き中に更新通知があり、アップデートしたところ

～/wp-content/languages/plugins/

フォルダの翻訳ファイル以外読み込めないようになっていました。
プラグインの　/languages/　フォルダには日本語翻訳ファイルすらありません。

それでも　～/wp-content/languages/plugins/　フォルダへ修正した翻訳ファイルをアップロードしてやればきちんと「views」と表示されます。

しかし、翻訳ファイルの読み込み場所の指定が効かないとなれば、更新するたびにファイルをアップロードしなければなりません。
また、「Poedit」を使ったりファイルマネージャーのようなサーバーの管理画面かFTPクライアントソフトを使ってファイルを転送する必要があります。

さすがにこれを毎回やるのは少し面倒だなと思ったので、とりあえずの応急処置としてWordPressの管理画面だけで完結できる方法を考えました。

WordPressの管理画面だけで完結する方法

まず、使用しているテーマの　functions.php　に以下のコードを追加

function my_n( $single, $plural, $number, $domain = 'default' ) {
return ngettext($single, $plural, $number);
}

次に、プラグイン編集から　WordPress Popular Posts　を選択し
class-wordpress-popular-posts-output.php　を開きます。

720行目あたりの

_n('1 view', '%s views', $pageviews, 'wordpress-popular-posts'),

を

my_n('1 view', '%s views', $pageviews, 'wordpress-popular-posts'),

に書換えます。

以下該当箇所の変更後

// views
if ( $this->options['stats_tag']['views'] ) {

$pageviews = $this->get_pageviews( $post_object );

if ( $this->options['order_by'] == 'avg' ) {
$views_text = sprintf(
_n( '1 view per day', '%s views per day', $pageviews, 'wordpress-popular-posts' ),
number_format_i18n( $pageviews, 2 )
);
}
else {
$views_text = sprintf(
my_n('1 view', '%s views', $pageviews, 'wordpress-popular-posts'),
number_format_i18n( $pageviews )
);
}

}

714行目も「○ビュー/日」と表示させたくない方は　_n( ～ ),　を　my_n( ～ ),　に書換えてください。

この方法だと2回目以降の修正は　_n　の先頭に my を追加するだけですむので比較的簡単です。
また他のプラグインでも対応可能です。

変更が適用されない場合の対処法

キャッシュ系のプラグインを利用している場合は表示がすぐに反映されません。
その場合はプラグインの設定画面などから一度キャッシュを削除した上で再度表示してみてください。
また、ブラウザに履歴が残っている場合にも表示が反映されないことがあるので、キャッシュを削除しても変わらない場合はブラウザの「閲覧履歴」を削除してから再度ページを読み込んでみてください。

以上。「WordPress Popular Posts」「○ビュー」から「○views」への方法でした。

しかし、そのままでは記事タイトルの長さによって「○○ views」の「○○」の部分と「views」の部分が中途半端に改行されてしまいます。

カスタマイズ方法

やり方はとても簡単です。

style.cssに1行追加

使用中のテーマのstyle.cssに次の1行を追加してください。

.wpp-views {display:inline-block;}

これだけ。

表示速度をランキング要因として組み込んだうえで MFI を導入する計画だ。

以下参考ページ

「MFIでは表示速度をランキング要因にしない」をGoogleが撤回、速いページを評価する ＃SMX West 2017

モバイルファーストインデックスでは、ページの表示速度をランキング要因から外すと Google は発言していた。しかし、米サンノゼで先週開催された SMX West 2017 でゲイリー・イリェーシュ氏はこの方針を撤回した。表示速度をランキン...

www.suzukikenichi.com

この発言でSEOにおける表示速度の重要性は今後ますます高まっていくのではないだろうか？

モバイルとPCでは使用する環境が大きく違う。PCの場合は殆どの場合机などでジックリと向き合うのに対し、スマホなどのモバイルはちょっとした合間や移動中の使用も多く、PC以上に表示速度が重要になる場面が多い。
僕自身何か調べたい事があれば殆どの事はスマホで完結してしまうが、Googleの検索結果からサイトへ移動しようとしてなかなか表示されない時はすぐに戻って次のサイトへ行ってしまう。
MFIのテスト段階で既に影響が出ているとする意見もあるようだが、公式な導入発表の前に自分のサイトの表示速度が一体どの位なのか？また、どこに問題があるのか？確認しておく事は今後のサイト運営にとって非常に重要ではないだろうか？

以上を踏まえた上で確認可能な無料のオンラインツールを以下にまとめる。

Webサイトの表示速度とスクリプト解析が可能なオンラインツール

基本的な使い方はURLを入力してボタンをクリックするだけ。
ドメイン名だけ(www.○○.com や ○○.com など)の入力でOKな場合が多いが http:/○○.com/ 等として処理される為、SSL対応のサイトの場合は、https://○○.com/ と入力する必要がある

PageSpeed Insights

googleが提供するサービス。モバイルとパソコン両方の分析結果を表示。

PageSpeed Insights

developers.google.com

GTmetrix

実際にページの表示に何秒かかったが分かる。

GTmetrix | Website Performance Testing and Monitoring

GTmetrix is a free tool to test and monitor your page's performance. Using Lighthouse, GTmetrix generates scores for you...

gtmetrix.com

CA App Synthetic Monitor

https://asm.ca.com/en/checkit.php

asm.ca.com

まとめ

現在のインデックス対象はPC向けのページとなっており、基本的な対策はもちらろん必要だが、Google検索ランキングの評価要素として表示速度も挙げられています。ただ、中にはそれほど表示速度の対策をしていなくても検索上位を維持している人気サイトもあり、どちらかと言えば、コンテンツの内容重視の評価となっている。

しかし、MFIが導入されればモバイル向けのページの評価がPC向けのページの評価につながるわけで、その状況が変わる可能性がある。

Googleでは、MFIの影響で現在の検索順位に大きな変動が起こらない事を大前提として現在もテストを続けているようだが、MFI導入の背景を考えれば、すぐに大きな変動は無かったとしてもモバイルやタブレット向けに最適化されたページが検索順位を上げていく事は間違いない。
逆を言えば、モバイルやタブレット向けに最適化されたページでなければ、現在検索上位のサイトでもランキングから消える可能性だってある。
現在はレスポンシヴデザインが標準となりつつあって、比較的新しいサイトでは個人サイトでもPC向けのページしかない事のほうが珍しい。
だからこそ、コンテンツの内容充実だけでなく表示速度も重要になってくる。

ここで注意したいのは「高スコア＝速い」ではない事。もちろん高スコアなほど速い場合が多いが、サーバーのスペックや時間帯、広告などの動的な要因によっても表示速度は変わる。重要なのは高得点を取る事ではなく、ユーザビリティを考えた落としどころを決める事。その為にこれらのサイトをうまく活用していきたいものだ。

WordPressの日付や時刻に関するテンプレートタグについて

WordPressには日付や時刻に関するテンプレートタグや関数が多数用意されています。

• the_time()
• get_the_time()
• the_date()
• get_the_date()
• .etc

など色々ありますが、
多くのテーマでは投稿の公開日を表示する処理に

• 投稿の公開時刻を表示する　the_time()
• 投稿の公開日を取得する　get_the_date()

を使うことが多いようです。

表示と取得の違いについてはここでは触れませんが、このテンプレートタグ？に日付・時刻に関するアルファベットの引数（パラメータ　※PHPで使われているのと同じ）を渡す事で、その引数に起因する日付時刻の表示や取得ができます。

詳しくはこちら

500 Internal Server Error

wpdocs.osdn.jp

通常であれば引数に ‘F’ を指定すると「January」～「December」のように英語のフルスペルで表示されます。
また ‘M’ を指定すると「Jan」～「Dec」のように3文字形式で表示されます。

しかし、日本語版WordPressでは、上記の関数を使用すると月や曜日などの表記が翻訳され強制的に「○○月」として表示されます。

それではどのようにして英語表記にするのか？
以下に具体的な方法を記述します。

get_post_time()を使う

月や曜日が強制的に翻訳されてしまうのを回避し、英語表記させるには　get_post_time()　を使用します。

使用しているテーマファイルの

<?php the_time( '現在のフォーマット' ); ?>

または、

<?php echo get_the_date( '現在のフォーマット' ); ?>

※「’現在のフォーマット’」はご自身の設定や使用しているテーマにより異なります。
となっている箇所を探し

のようにに書き換えます。

これで日付の表示が「April 13th, 2017」のように表示されるはずです。

ただ、この方法だと後から日付のフォーマットを変更したい、あるいは日本語に戻したいと思った場合、また該当箇所を探し出し、テーマファイルを直接書き換える必要があります。

そこで、毎回直接書き換える必要がないようにするには、一般設定でセットしたフォーマットを取得する　get_option(‘date_format’)　を引数に指定し次のように書き換えます。

このままでは現在設定中のフォーマットで出力されるので、管理画面の　設定 ＞ 一般 ＞ 日付のフォーマット　でカスタムを選択し、テキストボックスに「F jS, Y」等と記入します。

これで同様に日付の表示が「April 13th, 2017」のように表示され、変更したい時は管理画面の一般設定から自由にフォーマットを変更できるようになります。

フィルターフックを使って簡単に実装する方法

これまで説明してきた方法は、テーマファイルの該当箇所を探し出しソースを書き換える必要があるため、1つのテーマをカスタマイズしながら長く使う人や殆ど自作のテーマを使っている人には、1度書き換えてしまうだけなので良いかもしれません。

しかし、WordPressの初期テーマ「Twentyシリーズ」のように毎年新作が出るたびにテーマを変える人や子テーマ運用している人は、テーマの変更や親テーマのアップデートのたびに書き換え作業が発生するため、該当箇所が複数ある場合などは見落しによる修正漏れが発生する可能性があります。

そこで、フィルターフックを使って簡単に実装する方法を紹介します。

「Twentyシリーズ」の場合は　functions.php　に以下の記述を追加してください。

/*投稿日を英語で表示*/
add_filter( 'get_the_date','my_date_format');
function my_date_format(){
$my_date_format = get_post_time(get_option( 'date_format' ));
return $my_date_format;
}

WordPressで提供している「Twentyシリーズ」では　get_the_date()　を使って投稿日を取得しているので（シリーズ全部じゃないかも。。）、これをフックとしてmy_date_format() を実行。get_post_time(get_option( ‘date_format’ ))で取得した日付を返します。

これで管理画面の一般設定から自由にフォーマットを変更できるようになります。

このサイトでも使用している「Simplicity2」の場合は、子テーマの　functions.php　（子テーマ運用していない人はテーマ本体の　functions.php　）に以下の記述を追加。

/*投稿日を英語で表示*/
add_filter( 'the_time','my_date_format');
function my_date_format(){
$my_date_format = get_post_time(get_theme_text_date_format());
return "$my_date_format";
}

「Simplicity2」では　the_time()　を使って投稿日を表示しているので、これをフックとしてフィルターを通します（my_date_format()を実行します）。
また、表示・非表示判別を　get_theme_text_date_format()　という関数で行い、表示の場合に管理画面で設定しているフォーマットを返すというような処理をしているようです。（たぶん。。。曖昧な表現ですが、なんとなく試したら上手くいったので実はじっくりソースを読んでおりません。。。）

関数名・引数に若干違いがありますがやっていることは同じです。

更新日も英語表記にする

更新日を英語で表記するためには、投稿の最終更新時刻（と日付）を取得できる　get_post_modified_time()　を使います。

このサイトでも使用している「Simplicity2」では更新日を表示するために　get_mtime()　という関数が使用されていますが、この関数はWordPressのテンプレートタグではなく、フィルターがかけられない？（この関数をフックとしてmy_mdate_format()が実行されない)ので、この　get_mtime()関数内部で使われている（であろう）　get_the_modified_time()　をフックとしてフィルターを通してみました（my_mdate_format()を実行してみました）。

結果は成功で無事更新日も英語表記されたのでそのコードを紹介。

このサイトでも使用している「Simplicity2」の場合は、子テーマの　functions.php　（子テーマ運用していない人はテーマ本体の　functions.php　）に以下の記述を追加。
記述場所はどこでも結果は同じだと思いますが、解り易いので前述の「投稿日を英語で表示」のコードのすぐ下あたりに

/*更新日も英語で表示*/
add_filter( 'get_the_modified_time','my_mdate_format');
function my_mdate_format(){
$my_mdate_format = get_post_modified_time(get_theme_text_date_format());
return "$my_mdate_format";
}

と記述します。
これで更新日も英語表記となります。

ちなみに、このコードを他のテーマでも使える汎用性のあるかたちにすると以下のような感じでしょうか？

/*更新日を英語表記*/
add_filter( 'get_the_modified_time','my_mdate_format');
function my_mdate_format(){
$my_mdate_format = get_post_modified_time(get_option( 'date_format' ));
return "$my_mdate_format";
}

‘get_the_modified_time’　の部分は使用しているテーマによって変わります。
get_the_modified_time()は時間も取得できるため、更新日時の取得で比較的多く使われているようですが、更新日を取得または表示する関数は他に

• get_the_modified_date()
• the_modified_time()
• the_modified_date()

などがあります。

日本語翻訳ファイル　ja.po　ja.mo を書き換える

この方法は　wp-content/languages/　フォルダ内にある　ja.po　ファイルを書き換えて　ja.mo　へコンパイルするというもの。

具体的な方法は

403 Forbidden

sleepingegg.net

が参考になると思います。

ただし、最新バージョンのWordPressでは初期設定で本体のマイナーアップデートと翻訳ファイルが自動更新される仕様になっているので、この方法で英語表記させる為には自動更新の機能を停止する必要があります。また ja.po ファイル → ja.mo ファイルの変換にはPoeditなどの専用ソフトが必要になります。

locale.phpを書き変える

時々この事について触れている記事を見かけますが、数年前はこの方法で英語表記できた記憶があります。
しかし、現時点の最新バージョンではこの方法ではうまく機能しませんでした。
また、専門的な知識の無い人がWordPress本体のファイルを変える事はサイト運営上好ましくないと思うので、この方法は推奨しません。

WordPress現時点での最新バージョン4.7.3では　wp-includes/locale.php　を修正しても機能しません。
wp-includes/class-wp-locale.php　の129行目あたりからのinit()が該当する部分で、この中の　__(‘○○○’)または_x( ‘○○○’, ‘genitive’ )　を全て’○○○’に変更
以下該当箇所

public function init() {
// The Weekdays
$this->weekday[0] = /* translators: weekday */ __('Sunday');
$this->weekday[1] = /* translators: weekday */ __('Monday');
$this->weekday[2] = /* translators: weekday */ __('Tuesday');
$this->weekday[3] = /* translators: weekday */ __('Wednesday');
$this->weekday[4] = /* translators: weekday */ __('Thursday');
$this->weekday[5] = /* translators: weekday */ __('Friday');
$this->weekday[6] = /* translators: weekday */ __('Saturday');

// The first letter of each day.
$this->weekday_initial[ __( 'Sunday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'S', 'Sunday initial' );
$this->weekday_initial[ __( 'Monday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'M', 'Monday initial' );
$this->weekday_initial[ __( 'Tuesday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'T', 'Tuesday initial' );
$this->weekday_initial[ __( 'Wednesday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'W', 'Wednesday initial' );
$this->weekday_initial[ __( 'Thursday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'T', 'Thursday initial' );
$this->weekday_initial[ __( 'Friday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'F', 'Friday initial' );
$this->weekday_initial[ __( 'Saturday' ) ] = /* translators: one-letter abbreviation of the weekday */ _x( 'S', 'Saturday initial' );

// Abbreviations for each day.
$this->weekday_abbrev[__('Sunday')] = /* translators: three-letter abbreviation of the weekday */ __('Sun');
$this->weekday_abbrev[__('Monday')] = /* translators: three-letter abbreviation of the weekday */ __('Mon');
$this->weekday_abbrev[__('Tuesday')] = /* translators: three-letter abbreviation of the weekday */ __('Tue');
$this->weekday_abbrev[__('Wednesday')] = /* translators: three-letter abbreviation of the weekday */ __('Wed');
$this->weekday_abbrev[__('Thursday')] = /* translators: three-letter abbreviation of the weekday */ __('Thu');
$this->weekday_abbrev[__('Friday')] = /* translators: three-letter abbreviation of the weekday */ __('Fri');
$this->weekday_abbrev[__('Saturday')] = /* translators: three-letter abbreviation of the weekday */ __('Sat');

// The Months
$this->month['01'] = /* translators: month name */ __( 'January' );
$this->month['02'] = /* translators: month name */ __( 'February' );
$this->month['03'] = /* translators: month name */ __( 'March' );
$this->month['04'] = /* translators: month name */ __( 'April' );
$this->month['05'] = /* translators: month name */ __( 'May' );
$this->month['06'] = /* translators: month name */ __( 'June' );
$this->month['07'] = /* translators: month name */ __( 'July' );
$this->month['08'] = /* translators: month name */ __( 'August' );
$this->month['09'] = /* translators: month name */ __( 'September' );
$this->month['10'] = /* translators: month name */ __( 'October' );
$this->month['11'] = /* translators: month name */ __( 'November' );
$this->month['12'] = /* translators: month name */ __( 'December' );

// The Months, genitive
$this->month_genitive['01'] = /* translators: month name, genitive */ _x( 'January', 'genitive' );
$this->month_genitive['02'] = /* translators: month name, genitive */ _x( 'February', 'genitive' );
$this->month_genitive['03'] = /* translators: month name, genitive */ _x( 'March', 'genitive' );
$this->month_genitive['04'] = /* translators: month name, genitive */ _x( 'April', 'genitive' );
$this->month_genitive['05'] = /* translators: month name, genitive */ _x( 'May', 'genitive' );
$this->month_genitive['06'] = /* translators: month name, genitive */ _x( 'June', 'genitive' );
$this->month_genitive['07'] = /* translators: month name, genitive */ _x( 'July', 'genitive' );
$this->month_genitive['08'] = /* translators: month name, genitive */ _x( 'August', 'genitive' );
$this->month_genitive['09'] = /* translators: month name, genitive */ _x( 'September', 'genitive' );
$this->month_genitive['10'] = /* translators: month name, genitive */ _x( 'October', 'genitive' );
$this->month_genitive['11'] = /* translators: month name, genitive */ _x( 'November', 'genitive' );
$this->month_genitive['12'] = /* translators: month name, genitive */ _x( 'December', 'genitive' );

// Abbreviations for each month.
$this->month_abbrev[ __( 'January' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Jan', 'January abbreviation' );
$this->month_abbrev[ __( 'February' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Feb', 'February abbreviation' );
$this->month_abbrev[ __( 'March' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Mar', 'March abbreviation' );
$this->month_abbrev[ __( 'April' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Apr', 'April abbreviation' );
$this->month_abbrev[ __( 'May' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'May', 'May abbreviation' );
$this->month_abbrev[ __( 'June' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Jun', 'June abbreviation' );
$this->month_abbrev[ __( 'July' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Jul', 'July abbreviation' );
$this->month_abbrev[ __( 'August' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Aug', 'August abbreviation' );
$this->month_abbrev[ __( 'September' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Sep', 'September abbreviation' );
$this->month_abbrev[ __( 'October' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Oct', 'October abbreviation' );
$this->month_abbrev[ __( 'November' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Nov', 'November abbreviation' );
$this->month_abbrev[ __( 'December' ) ] = /* translators: three-letter abbreviation of the month */ _x( 'Dec', 'December abbreviation' );

// The Meridiems
$this->meridiem['am'] = __('am');
$this->meridiem['pm'] = __('pm');
$this->meridiem['AM'] = __('AM');
$this->meridiem['PM'] = __('PM');

// Numbers formatting
// See https://secure.php.net/number_format

/* translators: $thousands_sep argument for https://secure.php.net/number_format, default is , */
$thousands_sep = __( 'number_format_thousands_sep' );

if ( version_compare( PHP_VERSION, '5.4', '>=' ) ) {
// Replace space with a non-breaking space to avoid wrapping.
$thousands_sep = str_replace( ' ', ' ', $thousands_sep );
} else {
// PHP < 5.4.0 does not support multiple bytes in thousands separator. $thousands_sep = str_replace( array( ' ', ' ' ), ' ', $thousands_sep ); } $this->number_format['thousands_sep'] = ( 'number_format_thousands_sep' === $thousands_sep ) ? ',' : $thousands_sep;

/* translators: $dec_point argument for https://secure.php.net/number_format, default is . */
$decimal_point = __( 'number_format_decimal_point' );

$this->number_format['decimal_point'] = ( 'number_format_decimal_point' === $decimal_point ) ? '.' : $decimal_point;

// Set text direction.
if ( isset( $GLOBALS['text_direction'] ) )
$this->text_direction = $GLOBALS['text_direction'];
/* translators: 'rtl' or 'ltr'. This sets the text direction for WordPress. */
elseif ( 'rtl' == _x( 'ltr', 'text direction' ) )
$this->text_direction = 'rtl';

if ( 'rtl' === $this->text_direction && strpos( get_bloginfo( 'version' ), '-src' ) ) {
$this->text_direction = 'ltr';
add_action( 'all_admin_notices', array( $this, 'rtl_src_admin_notice' ) );
}
}

しっかり「今後のセキュリティ更新は自動的に適用されます。」なんて書いてある。

自動とは言ってもデフォルトではメジャーアップデート（4.7.* → 4.8.* など）はされず自分でやる必要がありますが、数年前までこんな機能は無く更新は通知が来て自分でするものだと思っていたので、正直ビックリしました。

この機能はWordPress3.7で導入されたようですが、本体のコアファイルだけでなく翻訳ファイルも自動更新されます。

セキュリティ上は自動更新される事で重大な不具合やセキュリティホールが放置されずとても良い機能だと思いますが、
「更新は自分でしたい！」「アップデートによる不具合報告が落ち着くまで様子を見たい！」なんて人には正直有難迷惑な機能かもしれません。

そんな人の為？ではないと思いますが、WordPressではちゃんと「自動バックグラウンド更新の設定」が色々と出来るようになっています。
※設定は自己責任でお願いします。

ここでは、コアファイルを含むすべての自動更新を完全に無効化するコードを紹介します。

WordPressのセキュリティ更新を止めるには

やり方はとても簡単です。

一応バックアップを取った上で、wp-config.phpファイルに以下のコードを記述します。

/*自動更新機能停止*/
define( 'AUTOMATIC_UPDATER_DISABLED', true );

もしくは、使用中のテーマのfunctions.phpファイルに以下のコードを記述。

/*自動更新機能停止*/
add_filter( 'automatic_updater_disabled', '__return_true' );

これで自動更新が停止され、更新画面の「今後のセキュリティ更新は自動的に適用されます。」が消えたはずです。

設定が色々出来ると書きましたが、例えば

・メジャーアップデートも自動更新する
・コアファイルだけ自動更新停止
・翻訳ファイルだけ自動更新停止
・プラグインも自動更新する
・テーマも自動更新する

など、個別の設定も可能です。

使う人によって細かい設定が可能なところは、やっぱりWordPressって凄い！！

以下参考ページ

500 Internal Server Error

wpdocs.osdn.jp

「Crayon Syntax Highlighter」を導入しました。

現在僕が使用しているWordPressテーマの「Simplicity2」は標準（プラグイン無し）で「highlight.js」が使えます。

詳しくはこちら↓

Simplicityでソースコードをハイライト表示する方法

Simplicity2.1.6からプラグインを使用せずとも、ソースコードをハイライト表示出来るようになりました。ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。ハイライト機能追加は、以前か

wp-simplicity.com

なぜ今「Crayon Syntax Highlighter」なのか？

「highlight.js」は動作が軽快で、何よりプラグインを使わなくても良いということは、ソースコードのハイライト表示をしながらもサイト表示の遅延を回避できるはずです。

実際に WordPress のソースコードのハイライトについて調べてみても、多くの方が「Crayon Syntax Highlighter」から「highlight.js」へ乗り換えているようです。

また「Crayon Syntax Highlighter」はこの記事を書いている時点で1年近く更新がされていません。その為 WordPress やその他のアップデートに伴った不具合も出ているようです。

では何故？今更「Crayon Syntax Highlighter」なのか？

それは、デザインが好き！ただそれだけです！

「highlight.js」は動作が軽いが故に、数あるテーマはどれも非常に簡素なデザインです。

同じサンプルコードで「Crayon Syntax Highlighter」と「highlight.js」を比較してみるとその差は歴然です。

 
サンプル
 

<html>
 <body>
サンプル
 </body>
</html>

上が「Crayon Syntax Highlighter」下が「highlight.js」です。

まあ、この辺は「速さ」をとるか「デザイン」をとるかで意見が分かれるところだと思いますが、僕はやっぱり「デザイン」を優先させたいなぁと、そう思ったわけです。

Crayon Syntax Highlighter は本当に重いのか？

でも使うからには少しでも速く、快適に使いたい！ということで少し調べてみました。

404 not found

kumiko-jp.com

Crayon Syntax Highlighterでページ読み込み速度が遅くなる現象を改善する | mawatari.jp

mawatari.jp

WordPress でソースコードをきれいに表示・埋め込むプラグイン 6 選 | セオリコ

WordPressの記事でソースコードをきれいに表示するプラグインを紹介します。どれがよいか迷ったときは「Code Block Pro」がおすすめです。

naifix.com

これらの記事を参考に設定をすることで、ある程度の遅延を回避できそうです。

ここで必須の設定が「その他」の項目にある「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れる事です。
Crayonの動作が重い原因は全てのページでプラグインを読み込む事にあります。それを回避するだけでもかなり効果があるはずです。
それ以外の設定については、基本的に自分の使いやすい設定にしても良いと思います。ただ、使わない機能はできるだけ停止して、負荷を減らすようにする事をすすめます。

最近では「Crayon Syntax Highlighter」はとにかく重いと言われる事が多いようですが、
実際に上記の設定をした上で、その他のハイライト系プラグインと比較してみて「著しく負荷が高いとは言えないと結論を出してる記事もありました。

日本語表示されない問題について

今まで日本語で表示されていた設定画面がアップデートに伴って日本語表示されなくなった！と書いている方が結構いるようなので、解決方法を紹介！
実際に最終アップデートをインストールして有効化してみたところ、全て英語で表示されていました。

これは　
example.com/wp-content/languages/plugins/
あるいは
example.com/public_html/wp-content/languages/plugins/
フォルダにある
crayon-syntax-highlighter-ja.mo
crayon-syntax-highlighter-ja.po
を削除することで解決しました。

※削除する前に必ずバックアップを取ってください。

とりあず現状で不具合等出ていません。
ただ、これからソースをハイライトした記事が増えてくれば、「Crayon Syntax Highlighter」による影響がでてくるかもしれません。
サイトの表示速度の遅延や不具合等でてくるまではしばらく使ってみたいと思います。

削除した日本語ファイルが復活する人は以下を参照

WordPressで自動的に適用されるセキュリティ更新を停止する方法

実はこのサイトではWordPressの軽量化やプラグインの不具合解消の為に、使わない翻訳ファイルなどを削除したりしています。しかし、消したはずのファイルが気付くと復活しているので「？？？」と思い更新ページを見てみると。。。しっかり「今後のセ...

www.nobutstyle.com

Apr 12th, 2017

上記の方法で自動更新を停止したとしても WordPress はどんどんアップデートされていくわけで、結局手動で更新を行えば翻訳ファイルも更新されてしまいます。「その度に翻訳ファイルを削除したりアップロードしたりするのはやっぱり面倒くさい！」って方は以下の方法をどうぞ。

まず　～/wp-content/plugins/crayon-syntax-highlighter/trans/　フォルダから日本語翻訳ファイル（crayon-syntax-highlighter-ja.mo　crayon-syntax-highlighter-ja.po）両方をダウンロードします。
次に　～/wp-content/languages/plugins/　フォルダ内に「crayon-syntax-highlighter」という名前のフォルダを作り、その中にダウンロードした日本語翻訳ファイル（crayon-syntax-highlighter-ja.mo　crayon-syntax-highlighter-ja.po）両方をアップロードします。

その上で以下のコードを fuctions.php に記述してください。

add_filter( 'load_textdomain_mofile', 'my_load_textdomain_mofile', 10, 2 );

function my_load_textdomain_mofile( $mofile, $domain ) {
  if ( 'crayon-syntax-highlighter' === $domain ) {
     $mofile = WP_LANG_DIR . '/plugins/crayon-syntax-highlighter/crayon-syntax-highlighter-ja.mo';
  }
  return $mofile;
}

こうすることで、/wp-content/languages/plugins/ フォルダ内の翻訳ファイルが更新されても強制手的に～/wp-content/languages/plugins/crayon-syntax-highlighter/ フォルダから翻訳ファイルを読み込むようになります。

ja　の部分は

get_locale()

使ったり

$locale = apply_filters( 'plugin_locale' , get_locale() , $domain );

とかして取得しても良いと思いますが、強制的に日本語で表示させたいのにわざわざ判定必要なんですかね？

「Crayon Syntax Highlighter」の翻訳ファイルは不完全で、所々日本語に翻訳されていない箇所があります。
samuraiさんという方が個人用に100%に近い翻訳ファイルを公開しているので、そちらを使ってみるのも良いかもしれません。

Crayon Syntax Highlighter の日本語表示 – WordPressの使い方

wordpress.nnn2.com

商用でも無料で利用でき、クレジット表記も必要ない写真素材サイト

ACアソシエイト

写真AC、イラストAC、シルエットACを紹介すると、無料会員登録1件ごとに100円の広告収入が手に入ります。さらにプレミアム会員登録で1,000円以上の報酬も。

www.ac-affiliate.com

２．Pixabay

高品質な無料画像・イラストが910,000枚以上！！

Just a moment...

pixabay.com

３．ぱくたそ

会員登録・利用報告・枚数制限など一切ナシ！！良識の範囲で自由に使える。
現在11,000枚以上！50,000枚目指して更新中です。

フリー素材ぱくたそ - 登録不要の無料写真素材・AI画像素材

ダウンロード制限なし、商用利用も無料のフリー素材サイト。日本の風景・人物・テクスチャーなどの写真素材とAI生成のフリー画像を60,190枚以上掲載しています。

www.pakutaso.com

４．GIRLY DROP

通称「がりどろ」「ガリドロ」女の子による女の子な写真素材てだけあって可愛い写真が一杯。
個人的にはサイト全体のデザインがポップでスタイリッシュな感じで好き。参考になるデザインの１つ。

おしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ) - GIRLY DROP(ガーリードロップ)

女性カメラマン2人が撮影したおしゃれ・かわいい無料写真素材。スマホ壁紙や誕生日、InstagramやCanvaにも！会員登録不要・商用利用OKのフリー素材サイト「がりどろ」。

girlydrop.com

５．.foto project

一部は198円～の有料だが、プロカメラマンの無料素材も多く写真の質も高い。

写真素材が無料！プロ撮影のフリー画像素材 .foto project

写真素材が無料！フリーの画像素材なら.foto project。プロカメラマン撮影の風景写真素材・女性モデルの人物写真素材・食材料理のフード写真・CGイメージ等、Web制作・ホームページ制作・グラフィックデザインなど商用利用も可能な高画質の...

free.foto.ne.jp

～番外編～

・タダピク

フリー画像を扱うサイト専門の検索エンジン。
複数のサイトから一括して画像の検索が可能！！

フリー素材、無料画像の横断検索サイトNo.1【タダピク】

商用利用OK・クレジット表示も不要の画像素材検索エンジンです。キーワードから複数の画像素材サイトを横断検索できます。

www.tadapic.com