ポータルサイト制作にも役立つ、WordPressの技術者寄りTips
プログラミングに馴染みのない人でも、それなりのことができるのが WordPress の良いところですが、少し高度なことをする際に便利なTipsとプラグインをご紹介。
プラグイン
HTML Editor Syntax Highlighter
投稿のテキストエディタをCodeMirrorベースのJSエディタにしてくれるプラグインです。
Gutenbergにも対応し、ハイライトのカラーリングはもちろん、Tabによるインデントや行番号の有無なども設定できます。
個人的にはEmmetに対応してくれると助かるのですが、issue #76によると要望があれば対応してくれるそうな感じです。
しかし、「ビジュアルエディタ」に切り替えると、インデントが全て消えてしまうので注意が必要です。
この挙動は実験したり調べたりしましたが解決できませんでした。
Loco Translate
gettext用の翻訳ファイルを管理画面から管理・生成してくれるプラグインです。
テーマディレクトリをスキャンしてpotテンプレートを作る機能もあり、テーマに限らずプラグインやWordPress本体の翻訳ファイルも扱えます。
また、WordPressに「Translator」権限が追加され、翻訳管理する人の権限も割り当て可能です。
多言語サイトには必須です。
Admin Menu Editor
管理画面のメニューをカスタマイズできるプラグインです。
例えば、デフォルトの「投稿」というメニューを「新着情報」などに変えたかったり、「メディア」メニューをもっと下に持ってきたかったりする場合があります。
アクションフック等を使うのも良いですが、プラグインの方が手間がないと思います。
Safe SVG
レスポンシブやRetinaディスプレイなどを考慮すると、SVGファイルのグラフィックは積極的に使っていきたいです。
SVGにはコードが埋め込めるのでWordPressではデフォルトで非サポートなのですが、このプラグインではアップロードできる権限などが設定できます。
また、SVGファイルのアップロード有効化だけでは「メディア」にサムネイル表示できないのですが、このプラグインを使用すると表示してくれます。
WP Bootstrap Navwalker
GitHub：
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
こちらはプラグインではないのですが、wp_nav_menu関数のwalkerオプションを使ってBootstrapのNavbarコンポーネントに対応するためのライブラリです。
自作すると面倒なので助かります。
ACF（Advanced Custom Fields）のTips
WordPressサイトならほぼAdvanced Custom Fieldsは必ず使うと思いますが、繰り返しフィールドを使うため、ためなるべくPro版を使います。
そんなACFのTipsです。
設定の同期
ACFのフィールドはテスト環境・本番環境などで統一する必要があります。
もしテーマをGit管理などしていれば、設定の同期機能を使いましょう。
やり方は簡単で、テーマフォルダの直下に `acf-json` という（書き込み可能な）ディレクトリを作ると、自動的に設定用のJSONファイルが吐き出されます。
あとはそのファイルをGit等でアップし、差分がある場合はACFの管理画面に「同期」というメニューが表示されます。
JSONファイルはひとつのフィールドグループで1ファイルとして保存されます。
参考：https://www.advancedcustomfields.com/resources/synchronized-json/
WYSIWYGフィールドのボタン設定
WYSIWYGフィールドのTinyMCEのツールバーは Full と Basic の2種類が選べますが、それぞれ以下のフィルタで変更できます。
（以下のコードがデフォルトです）
<?php
add_filter('acf/fields/wysiwyg/toolbars', function ($toolbars) {
// Fullツールバー
$toolbars['Full'] = [
1 => [
'formatselect', 'bold', 'italic',
'blockquote', 'bullist', 'numlist',
'alignleft', 'aligncenter', 'alignright',
'link', 'unlink', 'undo', 'redo',
'spellchecker', 'separator', 'shortcoder',
],
2 => [
'fontselect', 'fontsizeselect',
'outdent', 'indent', 'pastetext', 'removeformat',
'charmap', 'wp_more', 'forecolor', 'table', 'wp_help',
],
];
// Basicツールバー
$toolbars['Basic'] = [
1 => [
'bold', 'italic', 'underline', 'blockquote', 'strikethrough',
'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright',
'undo', 'redo', 'link', 'fullscreen',
],
];
return $toolbars;
});GoogleマップのAPIキー設定
Googleマップフィールドで、APIキーが必須になってからは自分のキーを設定する必要があります。
以下のようにフィルタで設定します。
<?php
add_filter('acf/fields/google_map/api', function ($api) {
$api['key'] = 'ここにAPIキー';
return $api;
});もしGoogle APIを使いたくない場合は Leaflet 番のプラグインもあります。
https://wordpress.org/plugins/search/acf-leaflet-field/
個人的には Leaflet ＋ Open Street Map をデフォルトにしてほしい気もします。
そのほかのTips
Gutembergの無効化
Gutemberg非常に強力なエディタなのですが、あまりにもクセが強く拡張も大変なので、無効化する場合は以下をfunctions.phpに記述します。
<?php
add_filter('use_block_editor_for_post', '__return_false');投稿のビジュアルエディタにCSS適用
ビジュアルエディタで表示ページと同じような見た目にするため必要です。
SassなどでBootstrapをimportしておけばのグリッドなども見やすくなります。
<?php
add_editor_style('エディタ用.css');
// Gutembergで使う場合
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_style('theme-editor-style', get_template_directory().'/エディタ用.css');
});jQueryの軽量化
デフォルトでは管理画面と表示側のjQueryは同じものが使われます。
表示側でアニメーションやAjax系の処理を使わない場合は、より軽いスリム版のjQueryに置き換えても良いかもしれません。
<?php
// いったんjQuery関連のスクリプトを削除
wp_deregister_script('jquery');
// スリム版を再登録
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
// wp_foot に追加する場合
//wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', [], false, true);以上です。