The post ロリポップでPHP(WordPress)のメモリ不足が発生!解決方法の解説 first appeared on Fukuro Press.
]]>ロリポップでこんなトラブルに遭遇しました。
このPHPメモリ不足の原因と解決策。
ロリポップで修正する方法を解説します。
※ WordPressに限らずPHP全般でも有効
私自身のブログで発生した事件ではありません。
ある方からトラブル依頼を受けていました。
管理画面で何かしらの操作したとき、
↓ 以下のエラーが頻発していたそうです。
サイトに重大なエラーがありました。
WordPressでのデバッグをさらに詳しく見る
↓ 次の操作をすると確率的にエラーになる
とにかく管理画面でエラーが発生してます。
厄介なのは必ず発生するのではなく、
数回に1回の頻度でランダムに起こることです。
それで原因を色々調べることにしました。
調査していくと、↓こんなエラーが出てたと判明します。
Backend fatal error: PHP Fatal error: Allowed memory size of bytes exhausted (tried to allocate 40960 bytes) in /home/hogehoge/public_html/wp-includes/option.php on line 281
この「Allowed memory size of 134217728 bytes exhausted」というのは「メモリ足りない。メモリ不足」という意味です。具体的には134MBのメモリを消費してました。
最初はプラグインが原因かなと思ったんですよね。
でも結局はロリポップのメモリ設定に問題がありました。
WordPressが必要とするメモリ量が少なすぎたんです。
WordPressでは、以下フラグでメモリ上限を変えれます。
WP_MAX_MEMORY_LIMIT
WP_MEMORY_LIMIT option allows you to specify the maximum amount of memory that can be consumed by PHP. This setting may be necessary in the event you receive a message such as “Allowed memory size of xxxxxx bytes exhausted”.
引用元 : https://developer.wordpress.org/apis/wp-config-php/#increasing-memory-allocated-to-php
これに必要なメモリ容量を代入するだけです。
具体的にはWordPressのwp-config.phpを開き、
最後あたりにメモリ容量を増やすコードを追加します。
↓ 具体的なwp-config.phpのコード修正例
/* メモリ上限の拡張 */
define('WP_MAX_MEMORY_LIMIT', '512M');
/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */
/** Absolute path to the WordPress directory. */
if (!defined('ABSPATH')) {
define('ABSPATH', dirname(__FILE__) . '/');
}
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');
このように /* 編集が必要なのはここまでです...*/
の前に記述します。この例ではWP_MAX_MEMORY_LIMITに対して512M = 512メガバイトを割り当てました。
ところがPHPメモリ不足は解決せず・・・
別な方法を探すことにしました。
根本的な解決策は.htaccessで上限設定することです。
ロリポップでは以下の方法で上手く行きました。
初めにphp.iniでphp_value, php_flagを有効にします。
↓ メニューから「PHP設定」を開く
↓ 対象サイトの「php.ini」⇒「設定」をクリック
↓ 開いたら一番下の項目をOnにする(画像参照)
このようにphp_value, php_flagを利用可能にします。
そうすると.htaccessの設定が優先されます。
そしたら.htaccessを編集していきます。
↓ ロリポップFTPを開く
↓ .htaccessの最後に以下の命令を追加
## メモリ上限を512MBに拡張
php_value memory_limit 512M
↓ 具体的にはWordPress設定の後に書く
# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
## メモリ上限を512MBに拡張
php_value memory_limit 512M
ここでは512MBまでメモリ上限を拡張してます。
その値は必要に応じて変更すればOKです。
これで.htaccessを保存してください。
PHP側でメモリ上限の反映を確認します。
↓ .htaccessと同じフォルダにtest.phpを作成
<?php
echo ini_get('memory_limit');
↓ そのtest.phpにブラウザからアクセス
上記のように.htaccessにて設定した php_value memory_limit の値が表示されれば成功です!あとはWordPressでメモリ不足が解決されたか確認してください。
もしメモリ不足が解決しないなら…
さらにPHPのメモリ上限を増やしてみてください。
今回みたいなトラブルを解決したい、
でも技術的な知識がなくてトホーに暮れている…
そういう人の為にトラブル解決相談もやってます。
↓ ココナラで次のサービス運営中
お困りなら何でもご相談ください。
基本的にいつでも作業代行できます。
The post ロリポップでPHP(WordPress)のメモリ不足が発生!解決方法の解説 first appeared on Fukuro Press.
]]>The post プラグインなしでWordPressページをリダイレクトする方法【PHPコード例】 first appeared on Fukuro Press.
]]>WordPressで次のような処理が必要でした
本当はプラグインを入れるのが確実だけど、どうしてもプラグインなしでリダイレクト(Redirect)したい場面があります。(PHPコードでどうにかしたい)
そんなマニアックな悩みへの解決策です。
ただし自己責任で行ってください。
例えばこんなケースを考えてみましょう。
↓ リダイレクトさせたいWP投稿ページURL
https://example.com/hoge/post-1234
↓ これを次のURLにリダイレクトさせたい
https://example.com/hoge/jikosyoukai
後から投稿URLを変えたいパターンです。
WordPress投稿画面では記事作成すると post-1234 みたいなスラッグが自動生成され、それに気づかないで記事投稿することがあります。そんな時に個別URLだけリダイレクトさせたいみたいな…
※ より正確に書くなら 自動生成されたスラッグで公開 ⇒ Googleにインデックスされる ⇒ 検索流入でアクセスがある ← こういうスラッグを手動変更できない状況を想定
そんな時は次の手順でリダイレクト可能です。
ここではPHPコードで何とかします。
だから初めにテーマのfunctions.phpを開きましょう。
↓ 外観 -> テーマファイルエディター を開く
↓ 右のファイル一覧から function.php オープン
ただし親テーマを直接編集するのは良くありません。
念のために子テーマを作っておいてください。
▼ プラグインによるWP子テーマの作り方
なくてもいいけど親テーマを更新したら親テーマへの変更はすべて消えちゃいます。それを防ぐために子テーマという仕組みがあるんですね。
とりあえずfunctions.phpを開ければヨシ
ここでは次のリダイレクトをします。
その場合はfunctions.phpにこんなコードを追加します。
↓ 個別にリダイレクトさせるコード例
function redirect_page() {
if (isset($_SERVER['HTTPS']) &&
($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) ||
isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https'
) {
$protocol = 'https://';
}else {
$protocol = 'http://';
}
$currenturl = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$request_uri = $_SERVER['REQUEST_URI'];
switch ($request_uri) {
case '/hoge/post-1234':
$urlto = home_url('/hoge/jikosyoukai');
break;
default:
return;
}
if ($currenturl != $urlto)
exit( wp_redirect( $urlto ) );
}
add_action( 'template_redirect', 'redirect_page' );
何してるかは大まかに分かりますよね?
分からないなら手を出さないでください。
ここからはさらに応用的な話です。
もっと汎用的なリダイレクト処理をしてみます。
例えば次のリダイレクトルールを考えます。
初めはスラッグ規則を「投稿日時+投稿名」にしていたけど、あとからパーマリンク設定を変えて「投稿名」だけにしたケースです。
その場合、汎用的なリダイレクトで対処可能です。
↓ より汎用的なリダイレクトPHPコード例
function redirect_page() {
if (isset($_SERVER['HTTPS']) &&
($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) ||
isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https'
) {
$protocol = 'https://';
} else {
$protocol = 'http://';
}
$currenturl = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$request_uri = $_SERVER['REQUEST_URI']; //wp_make_link_relative($currenturl);
$redirect_pattern_1 = '/[0-9]{2}\\/[0-9]{2}\\/[0-9]{2}/i';
if(preg_match($redirect_pattern_1, $request_uri) !== 0){
$urlto = home_url(preg_replace($redirect_pattern_1, '', $request_uri));
}else{
return;
}
if ($currenturl != $urlto)
exit( wp_redirect( $urlto ) );
}
add_action( 'template_redirect', 'redirect_page' );
かなり分かりにくいですね…
本当に原始的にリダイレクトルールを定義してます。
身もふたもないけど次の結論に至りました。
《《 普通にプラグイン使う方が楽 》》
だって自分でPHPコードを書いてしまうと、
ここまでリスクを取る価値はあるのか…
リダイレクト規則が1つか2つなら問題ないかも
でも複数のリダイレクトルールが必要なら、
大人しくプラグインを使うのが賢いと思います。
▼ この記事のRedirectionプラグインが優秀!
プラグインを使うのが確実ですね。
The post プラグインなしでWordPressページをリダイレクトする方法【PHPコード例】 first appeared on Fukuro Press.
]]>The post 「syntax error, unexpected ‘?’」が出た時のWordPress対処法 first appeared on Fukuro Press.
]]>WordPress管理画面にログインした時のこと…
真っ白画面にこんなエラーが表示されました。
Parse error: syntax error, unexpected '?'
少し厄介なエラーではありますが、
自力で解決することも不可能ではありません。
この解決方法には2種類があります。
※ ただしセルフ解決するなら自己責任!!
その原因・解決策とかを色々解説していきます。
WordPressにログインしようとした時
なぜか次のホワイトスクリーンに遭遇しました。
▼ 全WPユーザーが恐れるあの画面
Parse error: syntax error, unexpected '?' in /home/hogehoge/hogehoge.com/public_html/wp-content/plugins/jm-twitter-cards/admin/views/settings/settings.php on line 61
簡単に説明すると Syntax error = 「構文エラー」のこと、そして原因は unexpected '?' = 「予期せぬはてなマークあるよ」とエラーメッセージは伝えています。
分からない人からしたら厄介すぎる問題です。
実はログイン前に次を試したんですよね。
プラグインのどれかがエラー排出したようです。
なぜ分かったかは先ほどのエラーに書いてあったから
↓ この短いエラーにたくさんのヒントが隠れている
Parse error: syntax error, unexpected '?' in /home/hogehoge/hogehoge.com/public_html/wp-content/plugins/jm-twitter-cards/admin/views/settings/settings.php on line 61
↓ jm-twitter-cardsプラグインのsettings.phpが原因
/home/hogehoge/hogehoge.com/public_html/wp-content/plugins/jm-twitter-cards/admin/views/settings/settings.php
このようにWordPressでは pluginsフォルダにプラグイン全てが格納されていて、その中のフォルダ名(ここではjm-twitter-cards)がプラグイン名をあらわしてます。
その中のsettings.phpが構文エラーを吐いていた……
こういう風にエラーメッセージから色々推理できます。
これは使える知識なので知ってて損はないです。
次にエラー原因のプラグインファイルを調べました。
↓ 以下の場所に問題があった
[
'name' => 'twitterImage',
'label' => esc_html__('Image Fallback', 'jm-tc'),
'type' => 'file',
'default' => $opts["twitterImage"] ?? "",
],
↓ エラー行だけを抜き出すとココ
'default' => $opts["twitterImage"] ?? ""
ここが syntax error, unexpected '?' の原因。
なんとPHP7以上でしか動かない構文なんです。
でもPHPコードとしては正しい真っ当なコードです。
こういう理由だったと分析で判明しました。
この構文はnull合体演算子と呼ばれる構文です。
↓ null合体演算子のシンプルな例
$opts = ["name" => "Fukuro"];
$name = $opts["name"] ?? "Unknown";
このコードだと $opts["name"] がnullでなかったらその値を採用し、もしnullだったら右の値 "Unknown" が評価されるって感じです。
PHP7以前の書き方なら次と同じになります。
↓ null合体演算子はPHP5以前ならこう書ける
$opts = ["name" => "Fukuro"];
$name = isset($opts["name"])
? $opts["name"] : "Unknown";
プログラマーは冗長さを嫌うそうです。
だからできるだけ短くムダなく書きたい。
その願望を叶えるのがnull合体演算子という訳です。
それがエラーの原因とは皮肉ですね……
まあWordPressに限った話ではないです。
次のどちらかの解決策を試してください。
初めに思いつくのはPHP7に切り替えること
そもそも古いPHPを使ってるのが原因です。
だからPHPバージョン7に切り替えるのがベスト
ところがリスクもあるから気を付けてください。
このリスクを受け入れるなら試してください。
以下はWordPress + PHPバージョンアップの関連記事
▼ WordPressサーバー応答時間を短縮する効果的な方法
▼ PHPバージョンアップでWordPresエラーの対処法
相当リスクがあるので自己責任でお願いします。
PHPコードが書けてWordPresも理解している……
そういう人は自力解決に挑戦してみてください。
この syntax error, unexpected '?' エラー
そもそも古いPHPと互換性がないから問題です。
それなら古いPHPと互換性のある書き方に直せば解決
↓ 例えば先ほどのプラグインコード例(×)
[
'name' => 'twitterImage',
'label' => esc_html__('Image Fallback', 'jm-tc'),
'type' => 'file',
'default' => $opts["twitterImage"] ?? "",
],
↓ このコードなら次のように修正する(○)
[
'name' => 'twitterImage',
'label' => esc_html__('Image Fallback', 'jm-tc'),
'type' => 'file',
'default' => isset($opts["twitterImage"])
? $opts["twitterImage"] : "",
],
地道にnull合体演算子が使われているプラグイン・テーマのコードを修正していってください。あるいは使わないなら停止するか・削除するでもOKです。
とにかくnull合体演算子を使わないコードにする
もちろん自己解決するなら自己責任でお願いします。
以上の方法はWP初心者には難易度高すぎです。
問題をさらに悪化させることもあります。
少なくともWordPress初心者にはムズすぎです。
もし自力解決できずに困っているなら……
迷わず次の場所で相談した方がいいですよ。
特に修正代行依頼したいなら1番目のサービスが一番
そこで 《Webサイト制作・Webデザイン》 から依頼してみてください。
ちなみに、私自身もそこでサービス出品してます。
WordPressブログ経験歴の長さ。
トラブルに遭遇して自力解決した経験。
それを武器にWPトラブル解決相談をやってます。
もしお困りならお気軽にご相談ください。
The post 「syntax error, unexpected ‘?’」が出た時のWordPress対処法 first appeared on Fukuro Press.
]]>The post PHPバージョンアップでWordPresエラーの対処法 first appeared on Fukuro Press.
]]>PHPバージョンアップをしたら・・・
こういうケースはWPトラブルで多いです。
実際、そういうご相談も何件か受けました。
そういう人向けの対処法をまとめます。
PHPバージョンアップのエラー
それはプラグインが原因かもしれません。
だからもしエラーが出てしまったのなら、
始めに 原始的なプラグイン無効化 を試します。
そのやり方は次の通り
親切なサーバーなら管理画面からファイルマネージャーにアクセスできます。あるいはFileZillaなどのソフトとか使ってください。(ちなみに FileManager とかのプラグインもある)
そしたら次のディレクトリを探してください。
[WPインストール先]/wp-content/plugins
この plugins がプラグインを格納しているフォルダです。
plugins内部では1つのフォルダが1つのプラグインに対応しています。それを次のように名前変更して無効化していってください。
↓ 無効化前のプラグインフォルダ例
[WPインストール先]/wp-content/plugins/example-plugin
↓ 無効後のプラグインフォルダ例
[WPインストール先]/wp-content/plugins/__example-plugin
このように example-plugin -> __example-plugin と先頭にアンダースコア2つを付けると分かりやすいですね。これで原始的だけどプラグイン無効化できます。
そして無効化したあとにエラーが解決したなら、そのプラグインが原因です。削除するか手動アップデートなどの対策を取ってください。
PHPバージョンアップの影響...
それは他ならぬWordPress自身も受けます。
↓ こういう状況だとエラーが出る可能性大
トラブルの原因としては結構多いですね。
でもこれにも対処法はあります。
それがWordPressの手動アップデート
普通は管理画面からやるのですが、
エラーが出ている場合は手動になります。
そのやり方は次記事から解説しました。
↓ WP更新時の手動バージョンアップ手順
箇条書きだけすると、こういう流れです。
このやり方を分かりやすくまとめました。PHPバージョンアップでエラーが出てしまった場合、Wordpressが原因ということもあります。疑わしいなら上記記事を試してみてください。(ただし必ずバックアップを取ること!)
これは本当に臨時的な措置です。
そういう人がやるべきなのが、
PHPのバージョンダウン
根本的ではないけど、対処法になります。
例えばさくらサーバーだと次の手順です。
1.サーバー管理画面にログイン
ログインURL : https://secure.sakura.ad.jp/rs/cp/
2.言語のバージョン設定画面を開く
URL : https://secure.sakura.ad.jp/rs/cp/script/lang-version
3.PHPバージョンを最新に変更
上画面の「設定」からバージョンを最新に上げてください。ちなみに現在は7.4が最新です。PHP7.2は2020年11月に、PHP7.3は2021年11月に提供終了するみたいです。そこも注意が必要ですね。
また他サーバーのやり方は次の参照
基本的にどんなサーバーでもできるはずです。
ただしPHPバージョンダウンは臨時的
そのことだけは注意してくださいね。
ここまで対処法を紹介しましたが...
正直言って自力で解決はかなり難しいです。
それどころか返って危険です。
特にPHPを知らない・分からない人は要注意
自力でやるなら完全に自己責任です。
もし変なリスクを取りたくなりなら・・・
詳しい人に相談をオススメします。
↓ ネット上で相談・依頼できる場所
依頼するなら ココナラ がベスト
依頼者を吟味でき、作業代行まで依頼できて安心です。
ちなみに...私もそこでサービス運営してます。
↓ WPのトラブル解決相談始めました。
基本的には土日関係なく対応可。
トラブル相談のみならず作業代行もいたします。
お困りならご相談ください。
ここまでの対処法を簡単に箇条書き
もちろんPHPバージョンアップは超大事です。
エラーを恐れて怠るのはNGですね。
以上、PHPバージョンアップとWordPressエラーでした。
The post PHPバージョンアップでWordPresエラーの対処法 first appeared on Fukuro Press.
]]>The post WordPressでPHPから投稿PV数を取得してみた first appeared on Fukuro Press.
]]>投稿PV数はプラグインを使えば表示できます。
ただ次のように取得したかったんです。
WordPressでPHPから投稿PV数を調べる方法
その方法が分かったので、記録しておきます。
1つめは次のプラグインAPIを活用すること
WordPress Popular Posts
このブログでも次の記事で紹介しましたね。
人気記事を表示できる便利プラグインです。
その中に次のような関数があります。
↓ 公式ページより抜粋
wpp_get_views()
The wpp_get_views() template tag returns the views count of a single post/page/custom-post-type. It accepts three parameters:
Post/Page/CPT ID (integer, required).
Time range (string, optional). If time range isn't provided, wpp_get_views() will retrieve the total amount of views. Otherwise, it'll return the number of views received within the specified time range. Available options: all, last24hours, last7days, last30days.
Number format (boolean, optional). If number format is set to true (default), wpp_get_views() will format the views count with grouped thousands (eg. 1,233). Otherwise, wpp_get_views() will return the views count unformatted (eg. 1233).引用元 : https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags
↓ 公式説明の意訳
wpp_get_views()
テンプレートタグ wpp_get_views() は個別投稿・固定ページ・カスタム投稿タイプのページビュー数を返してくれます。次の3つの引数が受け取れます。
第1引数 : 投稿ID(必須)
第2引数 : 取得対象の期間(任意)指定されない場合は全期間のPV数を返します。指定されたならその期間のPV数が取得可能。オプション値 : all, last24hours, last7days, last30days.
第3引数 : 数字フォーマット(任意) もしtrueに設定(デフォルト)されたなら、wpp_get_views() は3桁ごとにコンマで区切った形でPV数(例 : 1,234)を返します。もし false だったら何も加工しないで返します。(例 : 1234)
これを使えばこんな風にPV数取得が可能。
↓ 現在投稿のPV数を取得する
/// 全期間の現在投稿のPV数取得
if (function_exists('wpp_get_views')) {
$pv = wpp_get_views(get_the_ID());
}
↓ 過去24時間のPV数取得
if (function_exists('wpp_get_views')) {
$pv = wpp_get_views(
get_the_ID(), 'last24hours'
);
}
上コードの get_the_ID()
が現在開いている投稿のIDを表します。あとはPV数をそのまま表示したり、PV数に応じてコンテンツを切り替えたりとか好きにしてください。
もちろん WordPress Popular Posts を使わない方法もあります。でも難易度とか管理が難しいので、プラグインの力を借りるのが一番ですね、結局
2つめはプラグインなしの方法
投稿メタ情報にPV数を追加します。
コード手順を載せると次の手順です。
↓ このようなコード内容
function set_post_views($post_id) {
$count_key = 'post_views_count';
$count = get_post_meta($post_id, $count_key, true);
if ($count == '') {
$count = 0;
delete_post_meta($post_id, $count_key);
add_post_meta($post_id, $count_key, '0');
} else {
update_post_meta($post_id, $count_key, ++$count);
}
}
この関数には投稿IDを渡せます。その投稿IDが 'post_views_count'
というキーを持っていれば、その値を+1、なければ新規で追加するといった感じです。
↓ このようなコード内容
function get_post_views($post_id){
$count_key = 'post_views_count';
$count = get_post_meta($post_id, $count_key, true);
if ($count == '') {
delete_post_meta($post_id, $count_key);
add_post_meta($post_id, $count_key, '0');
return '0';
}
return $count;
}
先ほど set_post_views()
で記録したPV数を取得して返すだけの関数。もしPV数のメタ情報が存在しないなら 0 を返す仕様にしました。
どのテーマにも single.php があるはずです。
そこで先ほど作成した関数を呼び出します。
/// PV数をカウントする
set_post_views(get_the_ID());
先ほど書いたように「single.phpって何?」というレベルの人は絶対に試さないでください。ある程度WordPressの仕組みが分かる人向けです。
そして上コード、残念ながら同一IPアドレスでもPVが重複カウントされます。厳密なPV数ではないという点には注意してください。
最後に好きな場所でPV数を取得するだけ
$post_pv = get_post_views(get_the_ID());
echo '現在PV数 : ' . $post_pv;
正直言ってあんまりいい方法ではないかも・・・
先ほど紹介したWPPプラグインを使うのが確実です。
でも参考として一応残しておきます。
ここで紹介した以下2つの方法
余程のことがなければ1つめを使ってください。
以上、WordPress・PHPでPV数取得でした。
The post WordPressでPHPから投稿PV数を取得してみた first appeared on Fukuro Press.
]]>The post WordPressのショートコードって何?そのメリットと作り方 first appeared on Fukuro Press.
]]>WordPressで同じような文章とかHTMLタグを使いまわしたいことってありますよね?
そんな時、その文章をいちいち打ち直していては手間と時間がかかりすぎてしまいます。
そこで時短と手間を減らすのに役立つのがショートコードと呼ばれる機能で、これを使うと短いコードを書くだけでその文章やタグを置き換えることが可能です。
ここではそのショートコードを使うメリットや作り方を詳しく分かりやすく解説していきます。
冒頭でも書いたようにショートコードとはある文章やタグなどを短い形式のコードで置き換えできる、というWordPress独自の機能です。
次のように [ と ] で囲まれた形がショートコードの基本形になっています。
[example]
上の例でいえば「example」というのがショートコードの名前です。
そしてWordPressの編集画面でこのショートコードを書くことでそれに対応した内容に置き換えることができるという訳です。
この機能を使って置き換えできる内容の例をいくつか挙げるとすると・・・
・・・などなど
文章とかタグとかcssとかを短いコードで簡単に投稿内に挿入できる・・・これがショートコードを使うメリットですね。
ただしこのショートコードの追加にはPHPなどのプログラミング知識が必要になります。
なので全て自力でショートコードを作ろうとするとかなり大変なので、面倒なことをしたくない人は次の記事で紹介したプラグインを使うのがおすすめです。
簡単な操作でショートコードの作成から挿入までできるので是非使ってみてください。
そしてここから以降は全て自力でショートコードを作りたい人向けの内容なのでPHPの予備知識がある上級者向けになります。
テーマ内のファイルなどを編集することがあるのでブログの構成を壊さないために必ずバックアップを取ってから慎重に作業してください。
もしそのリスクを取りたくない場合は先ほど紹介したプラグインを使いましょう。
ではPHPを使ってショートコードを作成・挿入する手順について解説します。
その手順は大まかに書けば次の通り
この2つの手順だけです。
ただし何度もしつこく言いますが、PHPファイルの編集をするのでファイルのバックアップを取って慎重に作業してください。
では詳しいやり方について次で説明していきます。
WordPressではショートコードを登録するために add_shortcode 関数が用意されています。
なのでまずはPHP内で add_shortcode 関数を使ってショートコードを登録するコードを追加しましょう。
コードを追加する場所は現在使用中のテーマの「functions.php」というファイル内です。
もしWordPress内でfunctions.phpを編集するならメニューから「外観」ー>「テーマの編集」を開いて、そこからfunction.phpの編集が可能です。
上の画像のように「テーマファイル」の中から functions.php を開けばエディタが表示されて編集が可能になります。
では functions.php にショートコードを追加しますが、ここでは例として定型文を登録してみましょう。
例えば次のようなPHPコードを書けば特定のページへの誘導文を登録できます。
function my_profile_link( $atts ){
return '<a href="xxx">私のプロフィールはこちら</a>';
}
add_shortcode('profile', 'my_profile_link');
これだけで [profile] というショートコードが編集画面で有効になります。
では簡単にコードの解説をしましょう。
まず add_shortcode 関数ですが次のようにして使います。
add_shortcode('ショートコード名', '文章やタグなどを出力する関数名');
あるショートコード名に対してそれを文章やタグなどに置き換える関数名を登録するだけです。
そして add_shortcode から登録される関数は公式リファレンスによると次の3つの引数を持つことができます。
これらの引数は必ず持つ必要はなく、不要なら省略することも可能です。
ただの定型文とかを出力するだけならあまり使うことはないですが、タグで囲むとかの処理だと必要になることもあるのでその例はまたあとで紹介します。
以上が add_shortcode 関数を使ったショートコードの登録の仕方です。
ショートコードの置き換え内容はエディタで自動補完とかされないので特定のページでだけcssとかスクリプトを読み込むのにも役立ちそうですね。
では今作ったショートコードを投稿の編集画面から追加してみましょう。
追加すると言っても次のように登録したショートコード名を角括弧( '[' と ']' ) で囲むだけです。
[profile]
ちなみにテキストエディタでもビジュアルエディタのどちらから挿入してもかまいません。
ただし角括弧とショートコード名の間には余計なスペースは入れないでください。そうすると正しく置き換えされないので注意が必要です。
そして投稿を保存すれば今挿入したショートコードが置き換えたい内容に変わります。
しかも編集画面上では置き換えらされないので、あとからいくらでもショートコードの内容を変更することも可能です。
以上がショートコードの基本的な作り方と使い方です。
もしプラグインに頼らず自作する必要があるならここまでの手順で簡単に追加できます。
ここまでで紹介したのはショートコードの基本的な作り方です。
次は少しだけ応用的な次のような作り方について説明していきます。
ではこの2つをコード例とともに見ていきましょう。
ショートコードはHTMLタグのように文章を囲んで装飾するような使い方もできます。
例えば次が文章を強調表示&下線を引くためのショートコードのPHPコード例
function my_bold_underline( $atts, $content = null ){
return '<strong><u>' . $content . '</u></strong>';
}
add_shortcode( 'bold_under', 'my_bold_underline' );
先ほど書いたように $content はショートコードで囲まれた文章なのでそれにタグを付けたものを返すことでタグで装飾できます。
そしてこれを使って文章を装飾するには投稿の編集画面で次のように文章を囲むだけです。
[bold_under]太字&下線にしたいテキスト[/bold_under]
まず装飾したい文章の前にショートコードを置き、最後の方には [/bold_under] のようにショートコードを閉じたものを置きます。
するとその文章は実際公開されるページ上で次のようなタグに置き換えられて表示されます。
<strong><u>太字&下線にしたいテキスト</u></strong>
ここまでの例のようにショートコードはただ単に文章を置き換えるだけでなく、タグそのものとしても使用可能です。
もしタグが長すぎて全て手打ちしたくないという場合はこの方法が役に立ちそうですね。
ショートコードには出力する内容を変更するためのオプションを付けることもできます。
例えば名前を含めた自己紹介をするショートコードを [intro] という名前で作るとします。
その時、名前の部分だけ置き換えるオプションを作れれば便利ですよね。
ではどうすればいいかというと次のコード例のように $atts からオプションの値を受け取ればいいのです。
function my_intro_message( $atts ){
$a = shortcode_atts( array(
'name' => '名無し'
), $atts );
return 'こんにちは、' . $a['name'] . 'です!';
}
add_shortcode( 'intro', 'my_intro_message' );
ここでは「name」という名前のオプションを受け取って自己紹介文に含めています。
先ほど紹介したように1番目の引数の $atts にはショートコードからのオプション配列が入っていると書きました。
これをそのまま使ってもいいですが、オプションが指定されていない場合を考慮して shortcode_atts 関数でデフォルト値を設定しています。
こうすれば name というオプションに自分の名前を指定することができるようになります。
[intro name="フク郎"]
そして実際にページ上に表示されるメッセージは次の通り
こんにちは、フク郎です!
これは本当に簡単な例ですが、オプションを使えばショートコードでできることの幅がさらに広がると思います。
ショートコードは投稿内で自分で好きな位置に定型化した文章を置いたり、複雑なHTMLタグをササッと挿入するのにとても便利です。
ここまでで紹介したように自分でPHPコードを書いて作成することもできますが、下手に構いたくないという人は Post Snippets などのプラグインを使うのがおすすめです。
以上、ショートコードを使うメリットや実際の作り方についてでした。
The post WordPressのショートコードって何?そのメリットと作り方 first appeared on Fukuro Press.
]]>The post simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法 first appeared on Fukuro Press.
]]>WordPressテーマのsimplicityにはSNSボタン表示機能がついてます。
Twitter、Facebook、ハテブ、etc...などのSNSの拡散力は無視できないし、シェアされることで記事がバズることもあります。
なので標準でSNSボタン表示できるsimplicityはブロガーに強力なテーマです。
でもSNSボタンをカスタマイズできないのが欠点
自由な場所に表示したり、あるSNSボタンだけ非表示にすることはできません。
そこで simplicityのSNSボタンを自由にカスタマイズする方法 を解説!
simplicityでSNSボタンをカスタマイズするには、
「外観」ー>「カスタマイズ」と進み、カスタマイズ画面で「SNS」を選びます。
カスタマイズできるのは次のような項目。
これだけ設定できれば十分というような気もしますが、結構制約もあります。
例えばシェアボタンをタイトル下に表示した場合、次のようなボタンが表示されます。
これでも悪くはないですが好きなデザインは選べず、
本文下に表示されるような 大きめのボタン にすることもできません。
あとタイトル下では "ツイートボタンを隠したいな" と思って、
からチェックを外すと、本文下のツイートボタンまで非表示になってしまいます。
このように標準だと表示できる位置はタイトル上と本文下の2か所のみ。
あるボタンを非表示にすると、2か所ともボタン非表示になってしまいます。
そこで位置・種類をカスタマイズするにはPHPから操作する必要があります。
といっても難しいコードではなく、
プラグインを使えば危険なことせず、安全にボタンのカスタマイズができます。
次はその方法について解説していきます。
まずSNSボタンをPHPからカスタマイズするには・・・
ウィジェット内にPHPを書ける PHP Code Widget プラグインをインストール。
「プラグイン」ー>「新規追加」からプラグイン名で検索すると次のように出てきます。
ちなみに直ダウンロードして使うなら、次URLからダウンロードも可。
https://ja.wordpress.org/plugins/php-code-widget/
インストールして有効化すると「外観」ー>「ウィジェット」に「PHPコード」というウィジェットが表示されるので、それを表示したい位置にドラッグ&ドロップできます。
以下の画像はPHPコードの設置例です。
タイトル欄の下にPHPコードを書き、
「保存」を押すとPHPコードを埋め込んだ領域でそのPHPが実行されます。
PHPファイルを直接編集してる訳ではないので、
エラーが起きてもブログ全体が壊れることは無いので安全です。
以下の方法では、SNSボタンをカスタマイズするのにこのプラグインを使います。
前置きが長くなりましたが、次がSNSボタンのカスタマイズ方法です。
位置のカスタマイズ方法から最初に見てください。
まずSNSボタンがどのように設置されているかという事ですが、
次のようにget_template_part関数からSNSボタンのテンプレートを呼び出してます。
<?php
get_template_part('template');
?>
このように書くとtemplate.phpというPHPファイルの内容が出力されます。
なのでSNSボタンを出力したいなら simplicity のテーマフォルダの中からSNSボタンの出力をしているテンプレートファイルを呼び出し、そのファイル名をget_template_partに渡せばいいという事です。
simplicity2のテンプレートフォルダは以下のURL
URL : [WPインストールディレクトリ]/wp_content/themes/simplicity2
ここには、SNSボタン出力する3つのテンプレートが存在します。
このいずれかを get_template_part関数 に渡せばSNSボタン表示されます。
例えばウィジェット画面で「投稿本文上」にPHPコードウィジェットを設置し、
次のようなPHPコードを書きます。
<?php
get_template_part('sns-buttons');
?>
そして保存すると記事タイトル下に次のようにSNSボタンが設置されます。
標準のカスタマイズ画面のような平たいボタンではなく、大きめのアイコンになりました。
またget_template_part
に 'sns-buttons-balloon' を渡すと、
次のような バルーンボタン が表示されます。
ここではタイトル下に表示していますが、
PHPコードウィジェットが置けるなら、どこにでもSNSボタンを設置可能です。
標準でもどのボタンを表示するかはカスタマイズできますが、
あるボタンを非表示にすると、全て場所でそのボタンが非表示になってしまいます。
それぞれのSNSボタンの表示・非表示は、
simplicityで定義されている次のようなPHP変数で切り替えされています。
変数名 | SNSの種類 |
---|---|
twitter_btn_visible | |
facebook_btn_visible | |
google_plus_btn_visible | Google+ |
hatena_btn_visible | ハテブ |
pocket_btn_visible | |
line_btn_visible | LINE |
これらの変数がtrueの時に表示され、failseの時に非表示になります。
例えば ツイートボタン と GooglePlusボタン を非表示にしたい場合・・・
PHPコードに次のように書きます。
<?php
/** ツイートボタンを非表示 */
set_theme_mod( 'twitter_btn_visible', false );
/** GooglePlusボタンを非表示 */
set_theme_mod( 'google_plus_btn_visible', false );
get_template_part('sns-buttons');
/** 設定を元に戻す */
set_theme_mod( 'twitter_btn_visible', true );
set_theme_mod( 'google_plus_btn_visible', true );
?>
テーマで定義されている変数を変更するには set_theme_mod関数 を使い、
この関数の1つめの引数に 変数名 、2つめに 値 を渡します。
この例ではtwitter_btn_visible
変数とgoogle_plus_btn_visible
変数にそれぞれfalse(偽)の値を渡しています。( = ボタン非表示 )
このPHPコードを保存すると、
次のようにツイートボタンとGooglePlusボタン以外が表示されるようになります。
カスタマイズ画面でボタン非表示にする場合と違い、
記事タイトル下にあるSNSボタンだけカスタマイズ可能ということです。
SNSボタンの上に「シェアする」が表示されますが、これもカスタマイズ可能。
このメッセージを表示しているのが share_message_label という変数です。
これを次のように set_theme_mod関数 で変えるだけで任意のメッセージになります。
<?php
set_theme_mod('share_message_label', "この記事をシェア!");
get_template_part('sns-buttons');
/** メッセージを元に戻す */
set_theme_mod('share_message_label', "シェアする");
?>
このPHPコードを保存すると・・・
上画像のように「この記事をシェア!」というメッセージが表示されるようになります。
SNSボタンのメッセージを一工夫すれば、シェア率アップにつながるかも。
simplicityは初めからSNSシェアボタンがついてて便利です。
でも位置やデザインまで細かく設定できないのが不便ですね。
SNSボタンを自由にカスタマイズしたい場合、今解説した方法をお試しあれ。
The post simplicityでSNSボタンの種類や位置を自在にカスタマイズする方法 first appeared on Fukuro Press.
]]>The post WordPressのアップロード上限を増やす3つの方法 first appeared on Fukuro Press.
]]>
WordPressで1MBを超えるサイズが大きい画像や音声・動画ファイルをアップロードすると失敗したことはありません?
それはWordPressではアップロードできるファイルサイズに上限があるからです。
上限のせいで失敗するというならその上限を増やせばいいだけですが、その設定はWordPress側ではなくそれをインストールしているレンタルサーバーで変更する必要があります。
設定方法もそれほど難しくないので、ここではそのアップロード上限を変更する3つの方法について紹介します。
普段サイズの小さい画像しかアップロードしないならアップロード上限について気にすることはあまりないと思います。
しかしメディアライブラリで画像をアップロードするとき、よく見ると次の画像のように「最大アップロードサイズ」で上限が表示されているはずです。
上の画像の例(さくらレンタルサーバーを使用)では最大アップロードサイズが2MB(メガバイト)なので2MBを超えるファイルはアップロードできないということになります。
画像だったら2MB超えるということは中々ないですけど音声や動画ファイルなら圧縮していても数十MB~数百MBになることもあるので厳しい制限ですよね。
ではこの上限はどこで定められているかというとWordPress側ではなく、サーバー側のPHP設定で定められています。
WordPressはPHPというプログラミング言語で作られていて、そのPHPプログラムの全体的な動作や環境を設定するためのファイルが「php.ini」です。そのファイルで設定できる項目にアップロード上限が含まれています。
php.iniでアップロード上限を定めているのは「upload_max_filesize」という1ファイル当たりの最大アップロードサイズを定める設定項目です。
この項目を例えば次のように変更すれば上限を増やせます。
upload_max_filesize = 20M
サイズは単位付きで指定します。20Mの「M」はメガバイトを表していて、単位を「G」にすることで上限をギガバイトにすることも可能です。
ただしphp.iniであまりにも大きなサイズ、例えば次のように
upload_max_filesize = 10G
としてもアップロード上限は10GBにはなりません。
なぜならWebサーバーソフトとして使われるapacheの設定に「LimitRequestBody」という項目があってその上限( = 2GB)を超えたアップロードはできないようになっているからです。
つまりどんなに上限を大きくしたとしてもアップロードできる最大サイズは2GBで頭打ちということです。
またサーバーのメモリにも上限は依存しているのでもしメモリが1GBしかないサーバーなら上限は2GBどころか1GBになってしまいます。
php.iniで設定した上限が必ず設定されるわけではないことに注意が必要ですね。
ではアップロード上限の変更のやり方が分かったところで具体的にその設定を変更する方法について紹介していきます。
上限を増やす方法は次の3つです。
この3つについて順にやり方を説明します。
まず今使っているレンタルサーバーで「php.ini」が変更できる設定項目がないか確認してみましょう。
例えばさくらインターネットのレンタルサーバーの場合、コントロールパネルにログインすると左のメニューに「PHP設定の編集」という項目があります。
この項目を開くと次のようにphp.iniをコントロールパネル上から設定する画面が表示されます。
この画面のテキストエリアに先ほど説明した「upload_max_filesize」の設定を追加して「保存する」ボタンを押せば変更が反映されます。
もしサーバー側でこのような設定項目が用意されているならそちらを使った方が楽です。
もしレンタルサーバー側に設定項目が見つからなかったなら自分でphp.iniを開いて設定項目を追加する必要があります。
php.iniはサーバーによって設置されている場所が違います。
なのでどこにあるかは各レンタルサーバーのQ&Aで「php.ini」で検索するか直接サポートに問い合わせしてみるのが良いと思います。
そしてphp.iniの場所が分かったらFTPソフトなどでファイルを開いて
upload_max_filesize = 20M
を追加して保存してアップロードしなおせば変更が反映されるはずです。
ーーサーバーのQ&Aを見てもサポートに聞いてもphp.iniの場所が分からない・・・
そういう場合はphp.iniの変更が許可されていない可能性があります。
それならphp.iniを編集する代わりに「.htaccess」というファイルで上限を設定しましょう。
その手順ですが、まずFTPソフトやサーバーのファイルマネージャーなどでルートフォルダ(一番上のフォルダ)にある「.htaccess」という名前のファイルを探してください。
ファイルが見つかったらエディタで開いて次の内容を最後に追加します。
#1ファイル当たりの最大アップロードサイズ
php_value upload_max_filesize 20M
内容を追加して保存してアップロードすればphp.iniで最大アップロードサイズを指定したのと同じ効果が得られます。
もしどうしてもphp.iniが見つからないという場合はこの方法を試してみてください。
今まで紹介した次の3つの方法
これらが全て上手くいかない場合は手の打ちようがありません。
レンタルサーバー側でできないと決まっていることはどうやっても変えることはできないので、サーバー移行なども考えた方がいいかもしれません。
特に無料レンタルサーバーは制限がかなり多いのでそれで苦労するくらいなら最初から有料のサーバーを契約した方が初期費用は掛かっても後々楽です。
どのサーバーが良いか分からないという場合は次のような2つのサービスが機能もサポートも充実していて信頼できるのでおススメです。
他にもレンタルサーバはありますが、コスパが良くて困った時に情報が得られやすいのがこの2つです。
さくらもwpXも両方お試し期間があるので今まで無料サーバーを使っていたなら試してみてください。無料と違って制限も全くないですし、性能も段違いです。
詳しくは次の記事でそれぞれのサーバーの特徴やメリットなどを紹介してあります。
特にWordPressで高速動作させたい場合はwpxレンタルサーバーの方がかなり高スペックなので本格的にブログ・サイト運営するのに向いているでしょう。
私は少なくとも無料レンタルサーバーを使うのだけは絶対やめるべき、だと思っています。
「無料レンタルサーバー」と聞くとなんでもただで使えると思う人もいるでしょう。ですが無料の代わりにPHPの設定すら変えられないレンタルサーバーもあるので安易にタダだからと飛びつかない方が賢明です。
普通に文字と画像だけのブログを運営しているならアップロード上限に困るということはほとんどないです。
しかしメディアが中心のサイト(動画サイトなど)ではアップロード上限が2MBだととても足りないのでphp.iniの設定を変更する必要があるかもしれません。
ただしサーバーの設定やメモリの上限によっては必ずphp.iniで設定した上限になるとは限らないのでそこは注意が必要な所です。
以上ここではWordPressのアップロード上限を変更する方法についていくつか紹介しました。
The post WordPressのアップロード上限を増やす3つの方法 first appeared on Fukuro Press.
]]>The post WordPressで広告タグをPHPコードから切り替える方法 first appeared on Fukuro Press.
]]>広告タグの切り替えを行うのは技術的には難しくありません。
しかし、WrodPressの標準機能だけでやろうとすると結構難しいです。テーマの編集から直接PHPを書き換えなくてはなりません。
その編集で少しでもエラーがあるとWordPress全体に影響が及ぶのでサイトが機能しなくなり、直すにはFTP経由で直接エラーのあるファイルを修正しなくてはならなくなります。
それはあまりにもリスクが大きいのでここではプラグインを使って広告タグの切り替えを行う方法を紹介します。
広告タグの切り替えにはPHPまたはJavaScriptが使えます。
どっちを使うかという事ですが私はPHPの方が良いと思います。それは次のような理由があるからです。
PHPの場合はHTMLにそのまま広告タグが出力されますが、JavaScriptはコードが出力されます。そうなると実行タイミングなどを考えなくてはならないので少し面倒です。
またPHPの方がヒアドキュメントなどがあるので改行を含む広告タグの出力がしやすいという理由もあります。
次に広告タグを挿入する場所ですが大きく次の2つに分けられます。
ここではプラグインを使って切り替えをするのですが、記事内と固定領域では使うプラグインが異なります。またPHPの出力の仕方も若干異なるので注意してください。
記事内広告と固定領域の広告はそれぞれ次のようにプラグインを使うことで切り替えができます。
サイドバーなどの固定領域ではウィジェットを使って切り替えをします。
しかし固定領域には標準でテキストしか入力できません。
そこでウィジェットでPHPを扱える「PHP Code Widget」というプラグインをインストールします。「PHP Code」と新規追加画面で検索するとプラグインが出てくると思います。
ダウンロードして使う場合は以下のURLからダウンロードしてください。
https://ja.wordpress.org/plugins/php-code-widget/
インストールして有効化するとウィジェット画面(「メニュー」ー>「外観」ー>「ウィジェット」)からPHPコードを貼り付けるウィジェットが表示されるようになります。
そのウィジェットを広告を表示したい領域(サイドバーなど)にドラッグして設置してください。以下は設置例です。
タイトルの下にPHPの入力欄があります。
広告タグを切り替えするにはそこに次のようなPHPコードを入力します。
<?php
$num = rand(0, 1);
switch($num){
case 0:
echo <<<EOM
/*広告タグで置き換え*/
EOM;
break;
case 1:
echo <<<EOM
/** 広告タグで置き換え */
EOM;
break;
}
?>
上のコードの例ではまず
$num = rand(0, 1);
というコードで0~1までの乱数を生成しています。
そしてswitch文の中でその数字に応じた広告タグを次のようにヒアドキュメントを使って書き出しています。
echo <<<EOM
/*広告タグで置き換え*/
EOM;
実際に使う場合は /** 広告タグで置き換え */ という部分を本当の広告タグで置き換えて使ってください。
ここでは広告数が2つですが必要な数に応じていくらでも切り替えできます。
記事内広告を表示するには「Post Snippets」というプラグインを利用します。プラグイン名で検索すればすぐに出てくると思います。
ダウンロードして使う場合は以下のリンクからダウンロードできます。
https://ja.wordpress.org/plugins/post-snippets/
インストールして有効化したら「設定」ー>「Post Snippets」からスニペット(使い回しのできるコードのこと)を作成できます。
「Add New Snippets」を押すと次のような編集画面が出てきます。
切り替えコードを作る場合は必ず「Shortcode」と「PHP Code」にチェックをつけてください。
そしてコード入力欄では固定領域と同じように次のコードを入力します。
$num = rand(0, 1);
switch($num){
case 0:
echo <<<EOM
/*広告タグで置き換え*/
EOM;
break;
case 1:
echo <<<EOM
/** 広告タグで置き換え */
EOM;
break;
}
ほとんど固定領域と同じですが1つ注意しなくてはならないのはPHPの開始タグ(<?php)と終了タグ(?>)がいらないということです。PHPコードをそのまま書くだけで動きます。
編集が済んだら「Update Snippets」を押すとショートコードが作られます。
ショートコードは記事の編集画面の上部メニューから「Post Snippets」(ビジュアルエディターならアイコン)をクリックするとスニペットの挿入ができます。
あとはこのスニペットを広告切り替えを行いたい全てのページに挿入するだけです。
広告タグをランダムで切り替えるだけではなく特定のページで特定の広告を表示したいという場合はもう少し工夫が必要になります。
そのためにはまずPHPコードが実行された記事URIを取得します。次のようなコードです。
$uri = $_SERVER["REQUEST_URI"];
これはアクセスされたページのドメインやプロトコルを除外したURIを返します。
例えばアクセスされたページが http://xxx.co.jp/?post=1 というページだった場合、$uriには /?pos=1 というURIが入ります。
このURIを使えば特定のページで次のように広告を切り替えられます。
$uri = $_SERVER["REQUEST_URI"];
if($uri == "/?post=1"){
echo <<<EOM
/** /?post=1のときの広告 */
EOM;
}else{
echo <<<EOM
/** それ以外の時の広告 */
EOM;
}
このような感じであるページに特定の広告が表示できます。
実際はランダム表示などと合わせて使われると思うのでコードはもう少し複雑になると思います。
以上プラグインを使った広告タグの切り替え方法について紹介しました。
The post WordPressで広告タグをPHPコードから切り替える方法 first appeared on Fukuro Press.
]]>The post カスタムフィールドを簡単追加できる「Advanced Custom Fields」の使い方 first appeared on Fukuro Press.
]]>WordPressで記事内に記事本文とは別の情報を埋め込みたい場合に役に立つのが「カスタムフィールド」という機能です。
これを使うと自分の好きな情報をページの好きな位置に出力することができますが、標準機能だとフィールド名とフィールドの値をすべてテキストとして入力することしかできず分かりにくい機能になっています。
そこで投稿画面で直感的にカスタムフィールドの入力ができる「Advanced Custom Fields」というプラグインの導入・使い方について解説します。
カスタムフィールドとは簡単にいうと記事本文以外の情報をページに埋め込むためのWordPress独自の機能のことです。
例えば普段WordPressで記事を新規追加するときはタイトルと本文しか入力できませんが、カスタムフィールドを使うと次のような多種多様な情報をページに追加することが可能になります。
通常このようにページにデスクリプションを埋め込んだりCSSやjavascriptのようなコードを埋め込むにはプラグインが必要ですが、カスタムフィールドを使うとプラグインなしで全て自前でそのような機能を追加することができます。
WordPressの標準機能でカスタムフィールドを表示するには投稿画面上の「表示オプション」から「カスタムフィールド」にチェックを入れます。
すると投稿画面下に次のような名前を値がペアになったカスタムフィールドを追加するエリアが出現します。
このフィールドに入力した名前に対応する値をテーマのヘッダーやページ内でなどで出力することでメタデスクリプションやメタキーワードタグの挿入、スタイルやスクリプトの埋め込みが可能になります。
ただWordPressの標準機能では次のような点でカスタムフィールドはかなり使いにくいです。
そこでその問題点を解決してくれるのがここで紹介する「Advanced Custom Fields」というプラグインです。
このプラグインを使用することで投稿画面にチェックボックスやセレクトボックス、エディタなどを表示して直感的にフィールの値を入力することができるようになります。
最初に「Advanced Custom Fields」をインストール・有効化してWordPressで使用可能な状態にします。
その手順ですがまずメニューから「プラグイン」ー>「新規追加」を開きましょう。
そして新規追加画面の検索欄に「custom fields」などのキーワードを入力すると検索結果の上当たりに次のようなプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
以下のプラグインページから直接ダウンロードして使うことも可能です。
https://ja.wordpress.org/plugins/advanced-custom-fields/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので必ずそれを押して有効化するのを忘れないでください。
これでこのプラグインが使用可能になります。
ここではプラグインの使用例としてページのヘッダー(headタグの間)にメタデスクリプションタグを挿入する方法を紹介します。
次の手順で投稿画面に表示するカスタムフィールドを新規追加します。
まずメニューから「カスタムフィールド」を開きます。
するとフィールドグループ画面が表示されるので「新規追加」ボタンを押してフィールドの新規追加画面を開きましょう。
新規追加画面が開いたら一番上に表示されている「ここにタイトルを入力」と書かれたテキスト欄にフィールド全体の名前をつけ(①)、「フィールドを追加」ボタンを押して(②)フィールドを追加します。
「フィールドを追加」ボタンを押すと次のようなフォームが出てくるのでまず赤色の「*」マークがついた3つの項目を入力しましょう。
それぞれの項目は次のような役割を持ちます。
フィールド名には一応アンダースコア(_)とダッシュ(-)が使えると書かれていますが、フィールドの値が保存されないという現象があるのでもし上手く動作しないなら半角英数字だけで名前をつけてみてください。
ここではメタデスクリプションのフィールドを作りたいのでフィールドラベルに「メタデスクリプション」、フィールド名には「description」、長いテキストを入力するためにフィールドタイプにはテキストエリアを選択しました。
ここではフィールドを1つしか追加しませんが、「フィールドを追加」ボタンを押すことで必要なだけカスタムフィールドは追加可能です。
フィールドの追加が終わったら「公開」ボタンを押して公開すればカスタムフィールドの新規追加は完了です。
これで投稿画面に次のようなデスクリプション用のカスタムフィールドが表示されるようになります。
ただしこれで終わりではなく、ページ内容にフィールドの内容を反映するには必ずテンプレートファイルでそのフィールド値を取得して出力することが必要です。
例えばここで作ったメタデスクリプション用のフィールドに入力された内容をヘッダー(headタグの間)に出力する手順は次の通りです。
まずメニューから「外観」ー>「テーマの編集」を開きます。
そしてテーマの編集画面でヘッダー内容を出力するテンプレートファイルである「header.php」を開きます。
そしてheader.phpの中でheadの終了タグ(</head>)の直前に次のような内容を追加します。
<!-- デスクリプション -->
<?php $description = get_field( "description" ); ?>
<?php if($description): ?>
<meta name="description" content=" <?php echo $description; ?>" />
<?php endif; ?>
この内容で保存し、投稿画面でデスクリプションを入力した後にページのソースを見ると次のようにheadの終了タグ直前にメタデスクリプションタグが追加されているのが分かります。
以上が「Advanced Custom Fields」を使って投稿画面にフィールドを作り、そのフィールド値をページに出力する手順例
ここではメタデスクリプションタグを出力する例を紹介しましたが、フィールドが複数あってもページ内にフィールド値を出力する手順は同じです。
カスタムフィールドは便利なものの、WordPress標準機能だと少し扱いにくいです。
なので今紹介した「Advanced Custom Fields」を使うと操作しやすいフィールドが簡単に作れるので作業を効率化できると思います。
以上、 Advanced Custom Fields プラグインの導入・使い方について解説しました。
The post カスタムフィールドを簡単追加できる「Advanced Custom Fields」の使い方 first appeared on Fukuro Press.
]]>