エスケープをする esc_attr

WordPress でエスケープをする esc_attr() の使用方法です。

echo esc_attr($text);

フォームの値を表示する場合は必ず esc_attr() を使用してエスケープするようです。

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/esc_attr

CSRF対策のwp_nonce_fieldの使い方

CSRF 対策で wp_nonce_field() を利用することができます。

使い方

wp_nonce_field() を呼ぶとhidden要素が生成されます。

wp_nonce_field( $action, $name, $referer, $echo );

form タグ内に wp_nonce_field() を呼んで出力された HTML コードを確認してみるとわかりやすいです。

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_nonce_field

WPINC という定数について

WordPress では WPINC という定数が定義されています。

define( 'WPINC', 'wp-includes' );

つまり、WPINC とは wp-includes という文字列のことですね。
wp-includes への参照をしたいときにはこちらを利用しましょう。

プラグイン SAKURA RS WP SSL をさくらレンタルサーバーで設定する

さくらレンタルサーバーで WordPress をクイックインストールすると、プラグイン SAKURA RS WP SSL がインストールされています。

SAKURA RS WP SSL を有効することによって SSL 対応がやりやすくなります。

SAKURA RS WP SSL とは

さくらレンタルサーバーでのみ有効な SSL プラグインということなので、さくらレンタルサーバーで利用します。

SAKURA RS WP SSL の効果

SSL 設定では、HTTP と HTTPS のリダイレクトが必要になります。
これを .htaccess で設定するのがよくある手法です。

しかし、.htaccess の手動編集にはコストがかかります。
SAKURA RS WP SSL を利用することで、.htaccess などの編集することなしにリダイレクト設定が完了する効果があります。

SAKURA RS WP SSL の設定

設定 > SAKURA RS WP SSL で設定画面を開くことができます。

SAKURA RS WP SSL

設定はチェックボックスにチェックをして、「SSL化を実行する」を押下するだけです。

設定変更はプラグイン停止

説明に「変更した内容を取り消したい場合は、プラグインを停止してください。」とありました。

確かにこのプラグインは一度設定すると、設定変更ができないのです。これは珍しいですね。

まとめ

SAKURA RS WP SSL はさくらレンタルサーバーの SSL 対応をするには有力なプラグインだと感じました。

さくらレンタルサーバーをご利用の方はこのプラグイン導入により運用コストの省力化が見込めるとでしょう。

参考

https://help.sakura.ad.jp/rs/2163/?article_anchor=js-nav-3

WordPress の目次プラグイン Easy Table of Contents を導入しました

WordPress の目次表示プラグインといえば、Table of Contents Plus が有名ですが、Table of Contents Plus は長年メンテされていないことも有名です。

そこで、当サイトでは Table of Contents Plus の代わりに Easy Table of Contents を導入しました。この記事では、Table of Contents Plus をご検討の方のために代替プラグインとして参考としていただきいと思います。

Table of Contents Plus は WordPress 公式ページから noindex 扱い

Table of Contents Plus の wordpress.org 公式ページをご覧いただければわかるのですが、Table of Contents Plus は公式ページでも noindex になっています。

公式ページにアラートのメッセージが掲載されています。

This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

https://wordpress.org/plugins/table-of-contents-plus/

このプラグインは WordPress のメジャーリリースでテストされず長くテストされていないという指摘があります。

つまり wordpress.org 公式のメッセージとしてメジャーバージョンのアップデートに追従していない Table of Contents Plus は使わない方がいいよというメッセージかと感じました。

Table of Contents Plus を紹介するメディアに注意

日本語のブログやメディアでは、このような状況になった近年でも Table of Contents Plus を紹介するような記事が多いです。このような情報には注意した方がいいと感じています。

現在のところ Table of Contents Plus は全く問題なく WordPress で動作しますが、今後長年使えるプラグインとなるかは不透明と言えるでしょう。

Easy Table of Contents を導入

私は有名プラグイン Table of Contents Plus の代わりとして、Easy Table of Contents を導入しました。

ひとまず目次を表示するだけでしたら、Easy Table of Contents で全く問題ないです。Table of Contents Plus の代替プラグインとして今後有力な選択肢になっていくと考えています。

Easy Table of Contents の設定

管理画面の設定の項目に目次という項目が登場しました。

設置に「目次」が登場

こちらからの項目から設定を行います。

自動挿入を有効に

自動挿入にした方が効率が良いので、投稿ページの自動挿入を有効にします。

表示条件を変更

表示条件は見出しがある場合全て表示にしておきます。

必ず表示にしておいた方がコンテンツ運用のコストは低く済むと考えています。

見出しラベルを変更

デフォルトだと見出しが英語なので、目次に変更します。

テーマを変更

テーマをグレーにしました。

ここはサイトの雰囲気に合う設定がいいですね。

参考

WordPress のメディアアップロードで http エラーの対策

WordPress のメディアアップロード機能ではたまに、http エラーと表示される場合があります。

これは何らかのエラーによりアップロードがうまくいかないケースです。

「何らかエラーが発生しているけれど、具体的にはわからないよ」という状態です。

この何らかのエラーというのが、原因がわかりづらい要因となっています。

しかし、WordPress を運用している方なら、ある程度経験済みのエラーかと思います。実際の対策をご紹介します。

エラー対策1 リロードする

ブラウザの一時的なセッションがうまくいっていない状態でのエラーや、共用サーバーでは調子が悪い場合があります。

WordPress では編集に、メディアアップロードをすると http エラー が発生しやすいです。

エラーが出ても慌てずブラウザをリロードしてから、再度アップロードを試してください。

エラー対策2 PHP のログをみる

リロードでもエラーが消えない場合、PHP のエラーログを確認すると良いでしょう。

エラーログが手に入る環境ではエラー解消の有力な手がかりになります。

エラー対策3 ホスティング元に問い合わせ

レンタルサーバーなら、エラーを伝えればは担当が調査してくれる場合があります。

どうしても困ったら問い合わせてみるとヒントをもらえるかもしれません。

get_stylesheet_directory_uri()の使い方

テーマのパスを取得する関数です。get_template_directory_uri()とほぼ同じです。
違いは「子テーマをの場合、子テーマのディレクトリパスを返す」ここがポイントです。

メリット

get_stylesheet_directory_uri() を使用するとこで、子テーマのパス指定が簡単になります。SSL 対応やドメイン変更など運用にも強いコードになります。

使い方

echo で出力して使います。

<a href="https://camon.tokyo/" ><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" /></a>

この辺りもget_template_directory_uri()と基本的には変わらないですね。

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_stylesheet_directory_uri

get_template_directory_uri() の使い方

get_template_directory_uri() はテーマのディレクトリパスを取得する関数です。

WordPress のテーマを編集する際、必ず遭遇するのが get_template_directory_uri() と言っても過言ではないでしょう。

メリット

テーマで get_template_directory_uri() を利用しておくことで、SSL 対応やドメイン変更など WordPress の運用に強いコードを作ることができます。

使い方

テーマのディレクトリパスを取得したい場合に利用します。
get_template_directory_uri が意味するテーマとは親テーマのことです。ここがポイントです。

出力は echo で行います。

<a href="/"><img src="<?php echo get_template_directory_uri(); ?>/images/camon_logo.png" /></a>

echo と組み合わせて HTML 内に出力というのが多いですね。

子テーマの場合

子テーマでテーマの パスを取得したい場合は、get_template_directory_uri ではなく、get_stylesheet_directory_uri を使用します。

参考

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri

Dashicons とは WordPress で使えるアイコンのことです

WordPress では Dashicons というアイコンが使用できます。
管理画面などで使用されているアイコンがこの Dashicons ですね。

管理画面に使われている Dashicons

使い方

Dashicons のアイコン一覧ページから HTML、CSS、PHP 内で使用できる記載をコピーできる形式で取得できるようになっています。一覧から取得して使うとすごく便利です。

参考

WordPressの管理画面にメニューを追加するadd_menu_pageの使い方

WordPress 管理画面に独自メニューを追加できる、add_menu_page() をご紹介します。

add_menu_page() は管理画面に独自のメニューを追加できる関数なので、テーマ開発やプラグイン開発で必ず登場する関数とも言えます。

使い方

add_menu_page() ですが引数が多めです。

add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null )

引数はストリング型が多いです。最後のポジションが int 型です。

呼び出し関数の中で、表示したい内容を記述すれば、追加したメニューに反映されます。

呼び出すには

add_menu_page() は add_action のアクションフックを使用します。

//管理画面にメニューを追加
function add_my_menu() {
    add_menu_page( 'page_title', 'menu_title', 'administrator', __FILE__, 'function_name', '', 8);
}
add_action('admin_menu', 'add_my_menu');

上記例の中にある、function_name 部分で HTML 出力コードを記載すると良いでしょう。

position について

パラメータの $position には管理画面での表示位置を数字で指定します。

Default: bottom of menu structure #Default: bottom of menu structure
2 – Dashboard
4 – Separator
5 – Posts
10 – Media
15 – Links
20 – Pages
25 – Comments
59 – Separator
60 – Appearance
65 – Plugins
70 – Users
75 – Tools
80 – Settings
99 – Separator

https://developer.wordpress.org/reference/functions/add_menu_page/#menu-structure

例えば管理画面にある設定項目の下に表示するには80を指定します。
ここは実際にコードを書いて試してみるとわかりやすいです。

参考