ケケンタ

functions.phpを編集したいけど、失敗したら「画面が真っ白になる」って聞くし、不安だな……

今回はこのようにWordPressでfunctions.phpを編集することにハードルを感じている方へ向けて

プラグイン「Code Snippets」の使い方
+
functions.phpを安全に編集する方法

を画像付きでわかりやすく解説していきます。

当ブログでもWordPressのカスタマイズ記事はたくさん公開していますが、たいていの場合はfunctions.phpの編集が必要です。

しかし、普段からWordPressでWeb制作をされている方ならともかく、そうでない方にとっては超重要ファイルであるfunctions.phpを編集するのはハードルが高いかと思います。

ケケンタ

安心安全にfunctions.phpが編集できるよう、丁寧に解説していきます！
ぜひ最後までご覧ください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

Code Snippetsとは？

プラグイン「Code Snippets」は、functions.phpなどのファイルを直接いじらなくても、WordPressの管理画面で誰でも簡単にコードの追加・編集ができるようにするためのプラグインです。

冒頭でもお伝えしたように、WordPressで機能的なカスタマイズをするときは、必ずと言って良いほどfunctions.phpなどのファイルを編集しなくてはいけません。

しかし、functions.phpはWordPressにおける心臓部のような存在で、ちょっとでも記述ミスがあると「サイトが真っ白」になってしまいます。

ケケンタ

「全角スペース」が紛れ込むだけでもエラーになって真っ白な画面になります……

「Code Snippets」は、そうした危うい状況を回避して、コードを安全に追加できるようにしてくれる便利なプラグインです。

Code Snippetsを使用するメリット

「Code Snippets」がどういったプラグインなのかを理解したところで、使用するメリットを具体的に見てみましょう。

このようにメリットはたくさんあります。
その中でも、なんといってもfunctions.phpを直接編集しなくて済み、エラーがあったときには自動的にコードを無効化して「真っ白い画面」になってしまうのを防いでくれる点が大きなメリットです。

Code Snippetsの使い方

STEP1　プラグインのインストール・有効化

まずはプラグインをインストールして有効化します。

STEP

Code Snippetsのインストール

「プラグイン」→「新規プラグインを追加」→「『プラグインの検索』に『Code Snippets』と入力」→「インストール」をクリック

 

STEP

Code Snippetsの有効化

インストールが完了したら「有効化」をクリックします。

 

STEP

不要な初期スニペット（コード）の削除

Code Snippetsでは、デフォルトでサンプルとして作成されているコードがいくつかあります。
もし不要であれば、このタイミングで削除してしまった方が、コード管理がしやすくなります。

STEP2　コードを作成・有効化する

プラグインを有効化できたら、次はソースコードを追加して「有効化」しましょう。

STEP

「新規追加」をクリックする

コードを新規作成するときは、「スニペット」→「新規追加」をクリックします。

 

STEP

「タイトル」と「ソースコード」を入力する

新規追加画面が表示されたら ①タイトル と ②ソースコード を入力します。

「ファンクション」タブが選択されていることをご確認ください。

 

ケケンタ

今回は例として、以下の内容を入力しています。

①タイトル

サンプル（投稿一覧に文字数を表示）

②ソースコード

/*
 * 投稿一覧画面に「本文」列を追加
 */
function my_add_post_column($columns) {
	$columns['length'] = __('本文');
	return $columns;
}
add_filter('manage_post_posts_columns', 'my_add_post_column');

/*
 * 「本文」列に記事の本文文字数を表示
 */
function my_custom_post_column($column_name, $post_id) {
	$post = get_post($post_id);
	if ($post === null) {
		echo "無効な投稿ID";
		return;
	}

	if ($column_name == 'length') {
		$content_length = mb_strlen(strip_tags($post->post_content));
		echo "本文: " . $content_length . " 文字";
	}
}	
add_action('manage_posts_custom_column', 'my_custom_post_column', 10, 2);

このソースコードを追加すると、「投稿一覧画面」に「本文の文字数」が表示されるようになります。

なお、ソースコードの実行範囲は以下の部分で選択可能です。

例えば今回の「投稿一覧画面に『本文の文字数』が表示されるようにする」というソースコードであれば、「管理画面のみで実行」を選択すると、より無駄がなくなります。

 

STEP

ソースコードを「有効化」する

追加したソースコードを「有効化」するときは画面下部にある「変更を保存して有効化」をクリックします。

有効化が成功すると以下のようなメッセージが表示されます。

 補足　～スニペットを有効・無効化する方法～

ソースコードを新規追加したときは「変更を保存して有効化」をクリックすることで、スニペットが「有効化」されます。

これ以外に、「スニペット管理画面」でも簡単にON/OFFを切り替えることが可能です。

STEP3　コードの内容がサイトへ反映されていることを確認する

最後に、有効化したソースコードの内容がサイトへ反映されていることを確認してみましょう。

今回追加したソースコードの例では、管理画面左側の「投稿」をクリックして「投稿一覧画面」を表示します。

ケケンタ

投稿一覧画面の列に、「本文」という列が追加+本文の文字数が表示されていれば成功です！

Code Snippetsを使用する際の注意点

注意点①　自動停止したときの対処方法

メリットでもご紹介したように、Code Snippetsではエラーがあったときにコードを自動停止してくれる機能が備わっています。

コードが自動停止されてしまった場合には、以下の流れでスニペットを再始動させましょう。

• エラーを修正する
• スニペットを再度「有効化」する

注意点②　強制実行されてエラーが発生したときの対処方法

ソースコードの内容によっては、エラーがあるにも関わらず、強制実行されてしまうことがあります。

強制実行によって「サイトが真っ白」になってしまったときには、以下の手順にしたがって、セーフモードを利用することでエラーを解消することが可能です。

STEP

セーフモードでCode Snippets編集画面へアクセスする

下記のURLへアクセスすると、Code Snippets編集画面をセーフモードで開くことが可能です。

Code Snippets 編集画面（セーフモード）：
https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

 

STEP

疑わしいスニペットをOFFにする

セーフモードでCode Snippets編集画面へアクセスすると、スニペットが有効化されています（ただし、内部的には停止しています）

ケケンタ

有効化されているスニペットの内、エラーが発生したと思しきものを無効化しましょう。

 Code Snippets編集画面【URL比較】

• Code Snippets 編集画面（通常モード）：
  https://ドメイン名/wp-admin/admin.php?page=snippets
• Code Snippets 編集画面（セーフモード）：
  https://ドメイン名/wp-admin/admin.php?page=snippets&snippets-safe-mode=1

 

STEP

ソースコードを修正+有効化する

セーフモードでスニペットを無効化した状態でソースコードを修正→有効化します。

 

STEP

セーフモードを解除する（通常モードに戻す）

ソースコードの修正が問題なく完了できたら、再度通常モードで管理画面にアクセスしてみましょう。

Code Snippets 編集画面（通常モード）：
https://ドメイン名/wp-admin/admin.php?page=snippets

ケケンタ

このときに「真っ白い画面」が解消されていればOKです！

まとめ

ここまでプラグイン「Code Snippets」の使い方や注意点についてご紹介してきました。

WordPressをカスタマイズしようとした場合、プラグイン導入やテーマ独自の機能を利用するなど、いくつか選択肢があります。

しかし、それらの範囲を超えたカスタマイズをしたいとなった場合には、必ずと言っていいほどfunctions.phpの編集が必要になります。

WordPressファイルの扱いに慣れている方ならともかく、そうではない方にとって、「ミスをしたらサイトが真っ白になってしまう……」という不安な状態で、functions.phpを編集するのは非常にハードルが高いでしょう。

「Code Snippets」は、そんな悩みを解決してくれる便利なプラグインです。

使い方もとてもシンプルで、導入するのも簡単です。

ケケンタ

この記事を参考に、ぜひ「Code Snippets」を導入してWordPressのカスタマイズに挑戦してみてください！

当記事ではWordPressのカスタマイズ記事をたくさん公開しているので、そちらも参考にしていただけるとうれしいです。

それでは、最後までご覧いただきありがとうございました！

 WordPressカスタマイズのおすすめ記事

ケケンタ

プラグインを更新したらサイトがおかしくなっちゃった……

WordPressでサイト制作をする上でのかなめとも言えるプラグインですが、機能改善やセキュリティ対策のために日々アップデートが行われ続けているものが多いです。

しかし、お使いのテーマやほかのプラグインとの相性によっては、最新版のプラグインへ更新をしたらサイトの表示などがおかしな状態になってしまうなど、不具合が発生してしまうケースがあります。

そうしたときの主な対処方法として以下の２つが挙げられます。

この記事では、この２つの内の

プラグインのバージョンを以前のものに戻す（バージョンを下げる）方法

をご紹介します。

公式サイトにプラグインの過去のバージョンが無くてお困りの方にはこちらの記事がおすすめです

あわせて読みたい

【WordPress】公式サイトから消えた過去のプラグインバージョンをダウンロードする方法 プラグインのバージョンを上げたら不具合が起きちゃったから元のバージョンに戻したいのに、公式サイトにバージョンデータがない…… WordPressでは多数のプラグインが利…

【解説】プラグインのバージョンを下げる方法

本章より、プラグインのバージョンを下げる具体的な手順を画像つきで解説していきます。

【手順①】プラグインの過去のバージョンをダウンロードする

STEP

管理画面「プラグイン」ページを開く

STEP

バージョンを下げたいプラグインの「詳細を表示」をクリックする

STEP

プラグイン公式ページを開く

STEP

「詳細を表示」をクリックする

画面右側のメニューにある「詳細を表示」をクリックします。

STEP

「以前のバージョン」で過去のバージョンを選択する

ページ下部にある「以前のバージョン」で過去のバージョンを選択します。

STEP

過去のバージョンをダウンロードする

ダウンロードしたデータファイル

【手順②】ダウンロードした過去のバージョンをアップロードする

過去のバージョンをダウンロードしたら、続いてWordPressサイトへダウンロードしたデータ（zip形式）をアップロードしていきます。

STEP

プラグインを「削除」する

有効化されているプラグインを「無効化」→「削除」します。

STEP

「新規プラグインを追加」をクリックする

STEP

「プラグインのアップロード」をクリックする

STEP

【手順①】でダウンロードした過去のバージョンを選択する

「ファイルを選択」をクリックするとファイル選択用ダイアログが開きます。

STEP

「今すぐインストール」をクリックする

STEP

「プラグインを有効化」をクリックする

STEP

バージョンが下がっていることを確認する

最新バージョンじゃなくなったため、更新案内が表示されています。

ケケンタ

以上がプラグインを過去のバージョンに下げる方法です！

バージョン選択の際に気が付いた方も多いかと思いますが、プラグインの過去のバージョンのデータは公式サイトに残されている場合が多いです。
※後述しますが、すべてではありません。

それらを利用すれば、さらに古いバージョンのプラグインを使用することも可能です。
（セキュリティリスクを考えると、できるだけ避けた方が無難ではあります）

ただ、Web制作の修正のお仕事などで、ごくまれに古いバージョンをダウンロードせざるを得ないこともあるため、そうしたときのために覚えておくと便利かと思います。

過去のバージョンが見つからないときに役立つ「PluginArchive」

プラグインによってはWordPressのプラグイン公式サイトから過去のバージョンが消えていることがあります。

そのようなときに役立つのが「PluginArchive」というサイトです。

「PluginArchive」にはプラグインの過去のバージョンデータが保存されており、公式サイトから消えてしまったバージョンをダウンロードすることが可能です。

ケケンタ

「PluginArchive」の詳しい利用方法は以下の記事をご覧ください！

あわせて読みたい

【WordPress】公式サイトから消えた過去のプラグインバージョンをダウンロードする方法 プラグインのバージョンを上げたら不具合が起きちゃったから元のバージョンに戻したいのに、公式サイトにバージョンデータがない…… WordPressでは多数のプラグインが利…

プラグインのバージョンアップによる不具合はバージョンダウンで対処できる

以上がWordPressでプラグインのバージョンを以前のものに戻す（バージョンを下げる）方法でした。

WordPressのプラグインは定期的なアップデートが行われます。

利用する立場としては常に最新版へアップデートしておきたいところではありますが、使用しているテーマやほかのプラグインとの相性によっては不具合が発生してしまうことも。

そんなときは、プラグインの過去のバージョンデータを公式サイトからダウンロードして、バージョンダウンするとサイトを元の状態に戻すことができます。

ケケンタ

この記事が少しでもお役に立ったなら何よりです！

あわせて読みたい

【WordPress】公式サイトから消えた過去のプラグインバージョンをダウンロードする方法 プラグインのバージョンを上げたら不具合が起きちゃったから元のバージョンに戻したいのに、公式サイトにバージョンデータがない…… WordPressでは多数のプラグインが利…

ケケンタ

プラグインのバージョンを上げたら不具合が起きちゃったから元のバージョンに戻したいのに、公式サイトにバージョンデータがない……

WordPressでは多数のプラグインが利用でき、定期的に機能の追加・修正のアップデートが行われます。

基本的にはアップデートされたときにWordPressで利用しているプラグインを更新しても問題は起こらないのですが、使用しているテーマやほかのプラグインとの相性によってサイトに不具合が発生してしまうことがあります。

そうしたときはプラグインの「過去のバージョン」をWordPressの公式サイトからダウンロードして、バージョンダウンすることで問題を回避できます。

が、しかし、プラグインによっては、肝心の「過去のバージョン」のデータが公式サイトから消されてしまっていることも……。

今回はそのような困った状況に置かれている方へ向けて

WordPressの公式サイトから消えた
過去のプラグインバージョンをダウンロードする方法

をご紹介します。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

過去のプラグインバージョンがダウンロードできるサイト「PluginArchive」

「PluginArchive」というサイトにWordPressのプラグイン公式サイトにも残っていない古いバージョンのプラグインが保存されています。

【PluginArchive】https://pluginarchive.com/

PluginArchiveトップページ

ケケンタ

もしもWordPressのプラグイン公式サイトに過去のバージョンが残っていなくても、このサイトを利用することで古いプラグインにバージョンダウンすることが可能ということです。

【解説】プラグインの「過去のバージョン」を使ってバージョンダウンする方法

WordPressの公式サイトにプラグインの過去のバージョンが無かった場合、「PluginArchive」からデータをダウンロードしてから、現在使用しているプラグインのバージョンと差し替えるという流れになります。

以下よりその具体的な手順を解説します。

【手順①】「PluginArchive」からプラグインの「過去のバージョン」をダウンロードする

この章では具体的に「PluginArchive」から過去のプラグインのバージョンデータをダウンロードする方法を解説します。

STEP

「WORDPRESS PLUGINS」をクリックする

「PluginArchive」へアクセスしたら、左下にある「WORDPRESS PLUGINS」をクリックします。

STEP

目的のプラグイン名で検索する

左側にある「Filter results」というメニュー内の検索窓にプラグイン名を入力→「SEARCH」をクリックします。

このとき、入力するプラグイン名は一部で大丈夫です。
（例えば、「Contact Form7」を検索したいときは「contact」だけでも問題ありません）

STEP

目的のプラグインのリンクをクリックする

STEP

「Releases」で目的のバージョンのリンクをクリックする

ページの下の方に「Releases」という項目があるので、そのテーブルの中から目的のバージョンのリンクをクリックします。

STEP

「DOWNLOAD THIS RELEASE」をクリックする

画面右側にある「DOWNLOAD THIS RELEASE」をクリックすると、選択したバージョンのプラグインデータ（zip形式）がダウンロードされます。

ケケンタ

以上が「PluginArchive」からプラグインの「過去のバージョン」をダウンロードする方法です！

【手順②】ダウンロードした「過去のバージョン」をWordPressサイトへアップロードする

「過去のバージョン」をダウンロードしたら、続いてWordPressサイトへダウンロードしたデータ（zip形式）をアップロードしていきます。
※この章では例としてプラグイン「FIleBird Lite」を取り上げています。

STEP

プラグインを「削除」する

有効化されているプラグインを「無効化」→「削除」します。

STEP

「新規プラグインを追加」をクリックする

STEP

「プラグインのアップロード」をクリックする

STEP

【手順①】でダウンロードした過去のバージョンを選択する

「ファイルを選択」をクリックするとファイル選択用ダイアログが開きます。

STEP

「今すぐインストール」をクリックする

STEP

「プラグインを有効化」をクリックする

STEP

バージョンが下がっていることを確認する

最新バージョンじゃなくなったため、更新案内が表示されています。

ケケンタ

以上がプラグインを過去のバージョンに下げる方法です！

WordPress公式サイトに存在しないバージョンはPluginArchiveでダウンロード可能

この記事では以下の２点について解説をしてきました。

WordPressのプラグインがアップデートされる理由のひとつにセキュリティ対策も含まれるため、可能であれば常に最新版のプラグインを利用していきたいところではあります。

しかし現実問題として、プラグインを最新バージョンにアップデートした途端、サイトに不具合が発生することもあります。

そのようなときには、公式サイトや「PluginArchive」のようなサイトから過去のプラグインのバージョンデータをダウンロードして、プラグインをバージョンダウンするといった回避策が必要になってきます。

ケケンタ

この記事がその一助となれば何よりです！

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressやWeb制作、PHPに関する情報を発信しています。

ご興味のある方はぜひほかの記事もご覧いただけるとうれしいです。

それでは。

ケケンタ

こんにちは！　ケケンタです。

WordPressでは簡単に画像のアップロードが可能です。

しかし、svgファイルやaiファイル、epsファイルといった少々特殊なファイルについてはセキュリティの都合で初期状態だとアップロードすることができません。

そこで今回は

WordPressにアップロードできる
ファイルタイプを増やす方法

をご紹介していきます。

ケケンタ

今回はプラグインを使用した方法をご紹介します。
誰でも簡単に設定可能なのでぜひお試しください。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

WordPressにアップロードできるファイル形式を増やす方法

様々なタイプのファイルをアップロードできるようにするためのプラグインとして

「WP Add Mime Types」

を使用します。

「WP Add Mime Types」をインストールして有効化するだけで、様々な形式のファイルのアップロードができるようになります。

プラグインをインストールすると管理画面「設定」に以下のように「Mime Type設定」という項目が追加されます。

ケケンタ

以下は「WP Add Mime Types」の設定画面です。

最初から様々な形式のファイルが有効化されています。

「ai」や「eps」形式もアップロード可能にしたいとき

ただ、実を言うと「WP Add Mime Types」を有効化しただけでは「ai」や「eps」形式のファイルをアップロードすることはできません。

ケケンタ

もしも「ai」や「eps」形式もアップロード可能にしたいときは、
「WP Add Mime Types」の「追加の項目」に以下の2行を追加し「設定を保存」をクリックします。

「追加の項目」に以下の2行を追加

ai = application/postscript
eps = image/x-eps
eps = appilcation/postscript（← 2024/7/26修正）

ケケンタ

たったこれだけで、「ai」や「eps」形式のファイルもアップロードできるようになります。

まとめ

今回はアップロード可能なファイル形式を増やす方法としてプラグインをご紹介しました。

実を言うと、functions.phpにちょっとしたソースコードを追加することでもアップロード可能なファイル形式を増やすことは可能……なのですが、お使いの環境によってはそれだと上手く行かないことがあるため、今回は誰でも簡単に使用可能なプラグインの方法をご紹介しました。

ケケンタ

この記事がお役に立ったなら何よりです！

当ブログではWeb制作やWordPress、PHPのお役立ち情報を発信しています。

ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです！

WordPressのプラグイン「List category posts」を使用すると、誰でも簡単に投稿リストを表示することが可能です。

しかし、「投稿日」や「更新日」といった日付は、デフォルトだと以下のようにWordPressで設定している形式で出力されます。

基本的にはそれで問題ないのですが、案件の中には

ケケンタ

投稿リストで表示する日付の形式だけ変えたい！

というものが、たまにあります。

そこで今回は

WordPressプラグイン「List category posts」で
表示する日付の形式を自由に変える方法

をご紹介します。

ケケンタ

「List category posts」で出力する日付の形式を変更するためには、プラグインのファイルを複製してその中にPHPの処理を追記する必要があります。
しかし、この記事の手順を踏めば誰でも簡単に変更可能なのでぜひお試しください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

List category postsで出力する日付の形式を変更する手順

「List category posts」で作成した投稿リストの表示内容の順番を変更する手順は以下の通りです。

手順が多く感じるかもしれませんが、やることと言えばテンプレートファイルをコピペしてその中にこの記事でご紹介するソースコードを追記するだけです。

ケケンタ

以下より、ひとつずつ順番にご説明していきます！

① 使用中のテーマディレクトリ直下に「list-category-posts」というディレクトリを作成する

まずは、いま現在使用中のテーマディレクトリの直下に「list-category-posts」というディレクトリを作成します。

例えば、使用中のテーマが「sample」という名前であれば、

～省略～/themes/sample/list-category-posts

という構成になるようにディレクトリを作成します。

② プラグインのディレクトリ内からテンプレートファイルをコピーする

次に、プラグインのディレクトリ内からテンプレートファイル（default.php）をコピーします。

default.phpはList category postsの初期状態において投稿リスト生成に使用されるデフォルトのテンプレートファイルです。
このdefault.phpを複製し、そのファイル内を編集することで任意の出力内容のテンプレートファイルを作成可能です。

ケケンタ

default.phpは以下のディレクトリ内にあります。

default.phpの場所

～省略～/wp-content/plugins/list-category-posts/templates/

これをいったんCtrl + Cでコピーしておきます。

③ コピーしたdefault.phpを①で作成した「list-category-posts」内に設置する

続いて、コピーしたdefault.phpを、①で現在使用中のテーマディレクトリ直下に作成した「list-category-posts」内に貼り付けます。（貼り付け＝Ctrl + V）

貼り付け後のファイル構成

～省略～/themes/sample/list-category-posts/default.php

④ default.phpのファイル名を任意のものに変更する

テーマディレクトリ直下にdefault.phpを設置したら、続いてこのファイル名を任意のものに変更します。

ケケンタ

名前はご自身にとって分かりやすいものならばなんでも構いません。
例えば僕はこのテンプレートファイルをスライダー用に使用したかったときは「slider.php」という名称にしました。

ファイル名変更後の状態（例）

～省略～/themes/sample/list-category-posts/slider.php

⑤ List category postsの設定項目「テンプレート」で作成したファイル名を選択する

ここで、WordPress管理画面の「外観→ウィジェット」をご覧ください。

「List category posts」のウィジェットの設定画面の最下部にある「テンプレート」には、初期状態だと以下のように「default」の表示しかありません。

初期状態

しかし、ここまでの作業を完了すると、設定していただいたファイル名の部分が「テンプレート」に表示されるようになっています。

ファイル名を「slider.php」に変更したときの例

ケケンタ

「テンプレート」項目で、新しく追加された方のテンプレート（上の画像なら「slider」）を選択して設定を保存して下さい。

もし「テンプレート」の項目に作成したファイル名が表示されない場合は
・ページを更新してみる
・「list-category-posts」を正しく使用中のテーマディレクトリ内に設置できているか
などをご確認下さい。

⑥ ④で用意したファイルを編集する

最後に、④で任意の名前に設定したファイルをテキストエディタで開き、実際にPHPのソースコードを追記していきます。

今回は例として、デフォルトでは「◯年◯月◯日」形式で表示される状況を想定したソースコードをご紹介します。

ケケンタ

具体的な編集内容は以下の通りです。

STEP

「get_dateが記述されている行」をコメントアウトする

STEP

以下のソースコードを追加する

  /**
   * 日付のフォーマットを変える
   */
  // 日付情報を取得
  $origin_date = $this->get_date($post); //◯年◯月◯日の形式

  // 「年」「月」を「.」に置き換える
  $date_del_year  = str_replace("年", ".", $origin_date);
  $date_del_month = str_replace("月", ".", $date_del_year);

  // 「日」を消す
  $after_date = str_replace("日", "", $date_del_month);

  $lcp_display_output .= $after_date;

ソースコード追加後

このソースコードでは、
「◯年◯月◯日」という形式を「◯.◯.◯」という形式に変更しています。
（例）2024年5月30日　→　2024.5.30

初期表示（WordPress設定で「◯年◯月◯日」形式を設定している状態）

ソースコードを追加した後の表示

ケケンタ

ご覧のように「日付」の表示形式が変更できました！

上記は「投稿日」に関するソースコードです。
もし「更新日」の表示形式を変更したい場合は、get_modified_dateの行に同様のソースコードを記述して下さい。
※その際は、上記のソースコードのget_dateになっている箇所（1か所のみ）をget_modified_dateに置き換えて下さい。

List category postsはPHPの知識があると柔軟な変更も可能

以上が「List category posts」で日付の表示形式を変更する方法でした。

今回は

◯年◯月◯日　→　◯.◯.◯

の形式に変更する方法をご紹介しましたが、ご自身のWordPress上での日付形式と先ほどのソースコードを照らし合わせ、少しだけ修正すれば好きな日付形式に変更可能です。

ケケンタ

PHPに馴染みのない方にとってはソースコード自体が見づらいかもしれませんが、今回のソースコードでは「なに」を「どんな文字」に置き換えるのかという部分がハッキリしていれば修正も難しくありません。

例えば今回ご紹介した例では「なに」＝年月日、「どんな文字」＝「.」と「空白」でした。

もし今回の解説とは違う形式に変更してみたいという場合も、ぜひ修正をお試しください。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

WordPressのプラグイン「List category posts」を使用すると、誰でも簡単に投稿リストを表示することが可能です。

しかし、その表示内容（アイキャッチ・投稿日・タイトルなど）の並びはデフォルトで決まっており、しかしながらWordPress管理画面上では並び順を変更することができません。

そこで今回は

WordPressプラグイン「List category posts」で
表示内容の順番を変更する方法

をご紹介します。

ケケンタ

表示内容の並び順を変更するためにはプラグインのファイルを複製してその中身を編集する必要があります。

しかし、この記事の手順を踏めば誰でも簡単に変更可能なのでぜひお試しください！

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

List category postsで表示する内容の順番を変更する手順

「List category posts」で作成した投稿リストの表示内容の順番を変更する手順は以下の通りです。

手順が多く感じるかもしれませんが、やることと言えばテンプレートファイルをコピペして中身を少し編集するだけです。

ケケンタ

以下より、ひとつずつ順番にご説明していきます！

① 使用中のテーマディレクトリ直下に「list-category-posts」というディレクトリを作成する

まずは、いま現在使用中のテーマディレクトリの直下に「list-category-posts」というディレクトリを作成します。

例えば、使用中のテーマが「sample」という名前であれば、

～省略～/themes/sample/list-category-posts

という構成になるようにディレクトリを作成します。

② プラグインのディレクトリ内からテンプレートファイルをコピーする

次に、プラグインのディレクトリ内からテンプレートファイル（default.php）をコピーします。

default.phpはList category postsの初期状態において投稿リスト生成に使用されるデフォルトのテンプレートファイルです。
このdefault.phpを複製し、そのファイル内を編集することで任意の出力内容のテンプレートファイルを作成可能です。

ケケンタ

default.phpは以下のディレクトリ内にあります。

default.phpの場所

～省略～/wp-content/plugins/list-category-posts/templates/

これをいったんCtrl + Cでコピーしておきます。

③ コピーしたdefault.phpを①で作成した「list-category-posts」内に設置する

続いて、コピーしたdefault.phpを、①で現在使用中のテーマディレクトリ直下に作成した「list-category-posts」内に貼り付けます。（貼り付け＝Ctrl + V）

貼り付け後のファイル構成

～省略～/themes/sample/list-category-posts/default.php

④ default.phpのファイル名を任意のものに変更する

テーマディレクトリ直下にdefault.phpを設置したら、続いてこのファイル名を任意のものに変更します。

ケケンタ

名前はご自身にとって分かりやすいものならばなんでも構いません。
例えば僕はこのテンプレートファイルをスライダー用に使用したかったときは「slider.php」という名称にしました。

ファイル名変更後の状態（例）

～省略～/themes/sample/list-category-posts/slider.php

⑤ List category postsの設定項目「テンプレート」で作成したファイル名を選択する

ここで、WordPress管理画面の「外観→ウィジェット」をご覧ください。

「List category posts」のウィジェットの設定画面の最下部にある「テンプレート」には、初期状態だと以下のように「default」の表示しかありません。

初期状態

しかし、ここまでの作業を完了すると、設定していただいたファイル名の部分が「テンプレート」に表示されるようになっています。

ファイル名を「slider.php」に変更したときの例

ケケンタ

「テンプレート」項目で、新しく追加された方のテンプレート（上の画像なら「slider」）を選択して設定を保存して下さい。

もし「テンプレート」の項目に作成したファイル名が表示されない場合は
・ページを更新してみる
・「list-category-posts」を正しく使用中のテーマディレクトリ内に設置できているか
などをご確認下さい。

⑥ ④で用意したファイルを編集する

最後に、④で任意の名前に設定したファイルをテキストエディタで開き、実際に中身を編集していきます。

今回は例として「タイトル」と「投稿日」の表示順を逆にする方法をご紹介します。

ケケンタ

具体的な編集内容は以下の通りです。

「get_dateが記述されている行」を丸ごと「get_post_title」が記述されている行の真上に移動する。

移動後

ファイル変更前と変更後の違い

投稿リスト（編集前）

投稿リスト（編集後）

ケケンタ

ご覧のように「タイトル」と「投稿日」の表示順が逆になりました！

List category postsは自分好みのテンプレートを用意できる

以上が「List category posts」で表示内容の順番を変更する方法でした。

最後まで解説をご覧いただきありがとうございます。

もしかしたらお気づきの方もいらっしゃるかもしれませんが、List category postsでは今回のファイル編集作業のように、

表示項目ごとの行の位置を入れ替えることで表示順序を簡単に変更することが可能

です。

また、PHPの知識がある方であれば、例えば投稿日の表示形式を柔軟に変更するといったことも可能です。

※投稿日はデフォルトだとWordPress管理画面で設定している形式で出力されます。

投稿リストを簡単に表示できるだけでも「List category posts」は充分便利ですが、カスタマイズもできればその利便性は一気に高まります。

ケケンタ

この記事が今後のWordPress制作の幅を広げるキッカケになれば何よりです。

それでは、最後までご覧いただきありがとうございました。

「投稿日の表示形式」を変更する方法を開設した記事を公開しました。

あわせて読みたい

【WordPress】List category postsで出力する日付の形式を自由に変える WordPressのプラグイン「List category posts」を使用すると、誰でも簡単に投稿リストを表示することが可能です。 しかし、「投稿日」や「更新日」といった日付は、デフ…

ケケンタ

こんにちは！　ケケンタです。

あまり無いケースかもしれませんが、過去に「同じカスタムフィールドで画像もPDFもどっちもアップロードできるようにしてほしい」という案件に当たりました。

単純にアップロードできるようにするだけであればACFのファイルフィールドを使用すれば簡単に実装可能なのですが、このときは「ファイルの種類に応じて出力の仕方（つまりHTML部分）」を変える必要がありました。

今回はそのときの経験を元に

１つのカスタムフィールドで画像やPDFなど
様々な種類のファイルをアップロードでき、
それを別々のHTMLで出力する方法

を解説していきます。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ACFの「ファイル」フィールドを使用して画像とPDFの両方に対応する

今回の解説では「画像」と「PDF」の２種類を例として扱います。

また、今回はWordPressプラグインの「ACF」を使用します。

全体の作業の大まかな流れは次の通りです。

ケケンタ

順番に詳しく解説していきます！

STEP１　ACFで「ファイル」フィールドを設定する

まずはACFで「ファイル」フィールドを設定していきます。

実際の設定内容

「返り値」を「ファイル配列」にするところがポイントです。

STEP２　対象ページのテンプレートファイルにコードを記述する

続いて、対象ページのテンプレートファイルで「ファイル」フィールドに設定された画像・PDFを出力するためのコードを記述していきます。

テンプレートファイルに記述するソースコード

<!-- フィールド名「file」を取得 -->
<?php $filefield = get_field('file'); ?>

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- mime_typeでファイルの種類を判定 -->
	<?php if( $filefield['mime_type'] == 'application/pdf' ) : ?>
		
        <!-- ここにPDFを出力するときに使用するHTMLを記述 -->

    <?php elseif( $filefield['mime_type'] == 'image/jpeg' ) : ?>

        <!-- ここに画像（jpg形式）を出力するときに使用するHTMLを記述 -->

    <?php endif; ?>
<?php endif;  ?>

ケケンタ

ポイントは次の通りです。

使用例

<!-- フィールド名「file」を取得 -->
<?php $filefield = get_field('file'); ?>

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- mime_typeでファイルの種類を判定 -->
	<?php if( $filefield['mime_type'] == 'application/pdf' ) : ?>
		<!-- PDF表示 -->
		<p>これはPDF</p>
		<object data="<?php echo $filefield['url']; ?>" width="100%" height="500"></object>
		<a href="<?php echo $filefield['url']; ?>" target="_blank">拡大表示する >></a>

    <?php elseif( $filefield['mime_type'] == 'image/jpeg' ) : ?>
		<!-- 画像表示 -->
		<p>これは画像</p>
		<a href="<?php echo $filefield['url']; ?>" ><img src="<?php echo $filefield['url']; ?>" alt="カレンダー"></a>
    <?php endif; ?>
<?php endif;  ?>

上記のソースコードによって、ファイルフィールドにPDFが設定されていた場合にはobjectタグで、画像ファイル（jpg形式）が設定されていた場合にはimgタグで値（設定されたファイル）が出力されるようになります。

PDFファイルを設定した場合

画像（jpg形式）を設定した場合

$filefield[‘mime_type’]（MIMEタイプ）について

今回の実装で利用している$filefield[‘mime_type’]ですが、こちらで取得しているのは

ファイルの種類を区別するMIMEタイプ情報です。

MIMEタイプを確認することで、取得した情報が画像（jpg形式）なのかPDFなのかを判定し、出力するHTML部分を変更しています。

ITの世界ではファイルの種類ごとに「この拡張子ならこのMIMEタイプ」というルールがあらかじめ定められています。

ケケンタ

以下はよくあるMIMEタイプの一例です

先ほどご紹介したソースコードのようにMIMEタイプで条件分岐したい場合は、「拡張子ごとにあらかじめ定められているMIMEタイプ」と「ファイルフィールドの戻り値の『mime_type』（先ほどのソースコードでは$filefield[‘mime_type’]）」を比較すればOKです。

ケケンタ

また、ご自身で特定のファイルのMIMEタイプを確認したい場合は、以下のようにvar_dump()関数でファイルフィールドの返り値を出力することで確認することが可能です。

$filefieldをvar_dump()関数で出力してデータの中身を確認している様子

<?php

echo('<pre>');
var_dump($filefield);
echo('</pre>');

?>

array(21) {
  ["ID"]=>
  int(23)
  ["id"]=>
  int(23)
  ["title"]=>
  string(33) "PDFファイル（サンプル）"
  ["filename"]=>
  string(37) "PDFファイル（サンプル）.pdf"
  ["filesize"]=>
  int(6243)
  ["url"]=>
  string(85) "http://swell01.local/wp-content/uploads/2024/05/PDFファイル（サンプル）.pdf"
  ["link"]=>
  string(191) "http://swell01.local/acf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab/pdf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%ef%bc%88%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bc%89/"
  ["alt"]=>
  string(0) ""
  ["author"]=>
  string(1) "1"
  ["description"]=>
  string(0) ""
  ["caption"]=>
  string(0) ""
  ["name"]=>
  string(93) "pdf%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%ef%bc%88%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%ef%bc%89"
  ["status"]=>
  string(7) "inherit"
  ["uploaded_to"]=>
  int(20)
  ["date"]=>
  string(19) "2024-05-23 10:52:32"
  ["modified"]=>
  string(19) "2024-05-23 10:52:32"
  ["menu_order"]=>
  int(0)
  ["mime_type"]=>
  string(15) "application/pdf"
  ["type"]=>
  string(11) "application"
  ["subtype"]=>
  string(3) "pdf"
  ["icon"]=>
  string(58) "http://swell01.local/wp-includes/images/media/document.png"
}

青色下線の引かれている部分がMIMEタイプを表しています。

HTML部分を分ける必要が無いのであればもっとシンプルに書ける

上記ではPDFか画像かどうかによってHTML部分の出力内容を変えていました。

しかし、もしもHTML部分の出力内容が同一でも問題が無いケースで有れば、極論objectタグを一行セットしておくだけでも実装は可能です。

<!-- フィールド名「file」を取得 -->
<?php $filefield = get_field('file'); ?>

<!-- フィールド名「file」の中身の有無を確認 -->
<?php if(!empty($filefield)): ?>

    <!-- 以下の１行で様々な種類のファイルに対応可能 -->
	<object data="<?php echo $filefield['url']; ?>">ファイルリンク</object>

<?php endif;  ?>

しかし、objectタグは対応ブラウザなどの関係により使用可能な状況が制限されやすいHTMLタグです。
また、使用環境によって動作が変わる場合があるため、万全を期すのであれば先ほどご紹介したようにファイルの種類に応じてHTMLタグを出しわけるのが安全かもしれません。

ACFのファイルフィールドなら複数種類のファイルをまとめて制御できる

ケケンタ

以上がファイルの種類に応じてHTML部分の出力を変える方法でした！

今回のようなケースはあまり無いかもしれませんが、もし自分と同じような状況に遭遇したという方の助けになればと思い記事にまとめさせていただきました。

この記事が少しでもお役に立ったなら何よりです。

ケケンタ

WordPressのプラグインでACFをよく使うけど、「日付選択ツール」の出力形式をもっと自由に調整したいなあ……

今回はこのようなお悩みをお持ちの方に向けて、WordPressのプラグインのひとつ

ACF（Advanced Custom Fields）の日付選択ツールの出力形式を自由に調整する方法

について解説します。

ケケンタ

今回の記事で解説するのは、ACFで設定可能なカスタムフィールドの内、「日付選択ツール」に関する内容です。

記事の後半では年月日の0埋めを無くす方法も解説しています

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ACFで設定したカスタムフィールドの値を出力するときの基本形

ACFを使用するとカスタムフィールドを簡単に設定することが可能ですが、その際、編集ページで入力・保存された値を実際にページ上へ出力するためにはテンプレートファイルにプログラムを記述する必要があります。

例えば、「日付選択ツール」における基本的な設定・出力用プログラム・出力結果は以下の通りです。

基本的な設定

出力用のプログラム

<?php 
if(get_field('date')) {
  the_field('date');
}
?>

get_field(‘date’)……カスタムフィールド[date]の値を取得する
the_field(‘date’)……カスタムフィールド[date]の値を出力する

出力結果

ACFの「日付選択ツール」の基本設定機能では実現できないこと

通常の使用方法でも設定項目の以下の箇所で、ある程度の出力形式を任意に設定することが可能です。

ケケンタ

しかし、例えば以下のように「年」と「月日」を分割して出力するといったことは、標準の設定機能だけでは実現することができません。

以下のような出力は、標準の設定機能では実現できない

「年」と「月日」を分割して出力する

ACFの「日付選択ツール」で出力形式を自由に調整する方法

ケケンタ

先ほどのように「年月日」を別々に出力したい場合には、ACFから取得した日付情報をPHPの処理で分割する必要があります。

以下は「年月日」を「年」と「月日」に分割して出力するコードです。

<?php 
if(get_field('date')) {

	// 日付情報を取得
	$dateStr = get_field('date');

	/* *** 年月日を分割する ***
     * ACFの設定で出力形式（戻り値の形式）を「Y/m/d」という形で「/」区切りにしておき、
     * その区切り文字「/」を利用してexplode関数で分割している
     */
	$dateStr = explode("/",$dateStr);

    // 分割した「年月日」をそれぞれの変数に格納
	$year  = $dateStr[0];
	$month = $dateStr[1];
	$day   = $dateStr[2];

	// 月日の出力
	echo $month . '月' . $day . '日';
				
	echo '<br>';

	// 年の出力
	echo $year . '年';
}
?>

このような処理を記述することで、以下のように年月日を分割した出力が実現可能です。

また、「05」というような0埋めを無くしたいときには、以下のようにintval関数で年月日情報を数値型に変換すればOKです。

0埋めを無くしたいときはintval関数を使用

<?php
if(get_field('date')) {

	～　中略　～

	// 月日の出力
	echo intval($month) . '月' . intval($day) . '日';
				
	～　中略　～
}
?>

PHPも活用すればACFの出力形式も自由自在

以上がACFの「日付選択ツール」の出力形式を自由に調整する方法でした。

WordPressのプラグインは便利ですが、今回お伝えしたように、ほとんどの場合は何かしら機能的な制限があります。

そのようなときにPHPの標準的なプログラムを活用することでできることの幅が一気に広がります。

今回はその中の一例について解説してみました。

ケケンタ

この記事がお役に立ったなら何よりです！