（更新：2020/06）プラグイン
（作成：2017/10）

紆余曲折して現行サイトに落ち着いた事もあり、折角だから何か書いておこうと思って。

そもそもWordPressが何者か、というのはググればウチとこよか適切な解説が見付かるので端に除けといて。
あるサイトではブログだと言い、またあるサイトではCMSだと言い。成程確かにどちらも出来るけれど、その辺ももうパラダイムシフトしちゃってるシロモノなんじゃないかナーなんて。コレもうPHPとHTMLとjavascriptの皮を被ったWeb開発フレームワークでしょ。そう言いたくなるくらい想像以上に何でも出来るバケモノツール。
ただそれだけに、コレ使ってWebサイトを立てよう、となると（インストール周りは置いといて）結構敷居が高い。少なくともHTML+CSS+ちょこっとJavaScript齧った程度のWebサイト管理者にゃ手に余ると思う。PHP経験があってもコレには気軽に立ち向かえない。成程、世の中にWordPress経験者募集とか代行サービスがあるわけだ。

かくいうウチもWebに関してはタグ打ち時代から進歩せず、他人様に語れる程詳しくは無いので色々調べつつ現行サイトをこさえてみた次第。
以下に記載した情報は、基本的にウチ基準のモノの考え方で語っているので、同意出来ない箇所もあるかと思うケドご了承の程を。

テーマ

Webサイトの顔は何と言ってもデザイン。いくら垂涎モノの情報が選り取り見取りだったとしても、テキストベタ書きで申し訳程度の改行区切りなサイトは見る気起きない。
ただまあ、拙サイトが見栄え良いかと言うと、うん。もうその話は止しましょう。

兎も角、思うさまWordPressのテーマ検索やGoogle先生に問い合わせ、幾つか試用してみた結果、以下のテーマが好みに合致した。

• Simplicity | 内部SEO施策済みのシンプルな無料WordPressテーマ

このテーマは「WordPress テーマ カスタマイズしやすい」みたいな検索で、紹介サイト経由で辿り着いた。実際に使ってみて良い点/悪い点は以下の通り。

• ○ デフォルトの見た目でヘッダが無駄にデカくない
• ○ ページ構成（サイト名、本文、サイドメニュー等）が王道で判り易い
• ○ シンプルだけどシンプル過ぎず、レイアウト変更やSNS、アクセス解析登録など欲しい機能は標準搭載
• ○ 配布サイトでの説明が非常にしっかりしていてマニュアルとして優れている
• ○ SEO施策済み
• ○ 日本語
• × WordPress上で色のカスタマイズ項目が足りない（検索ボックスやコメント部の色指定が出来なかったり）
• × WordPress上でデザインの詳細なカスタマイズができない（キャッチフレーズを <title> 上から消すとか、SNSボタンのサイズ変更とか）
• × 日本語だけどカタカナ語が多い

あ、まず述べておきます。上記×項目はほぼ言い掛かりです。他のWordPressテーマは、この比じゃないくらいカスタマイズ性に乏しいものばかりです。
むしろSimplicityはその点においても頑張って項目が用意されているし、足りない部分は配布サイト上で詳解されていて超絶良心的。そんなこんなで拙サイトではこちらを有難く使わせて頂くことに。

なお、Simplicity導入の際は必ず子テーマもインストールすること。後々の保守を考えると、親テーマは綺麗なまま残して子テーマで色々弄った方がアップデートも楽で捗る。
その辺は配布サイトにも記載があるので、導入前に読むことを推奨します。

• Simplicityの子テーマをインストールする方法

うまくいかないテーマ検索方法

以下、テーマ探しでの個人的所感。

• WordPressのテーマ検索はオマケ

  WordPressは兎に角テーマが異常に豊富。その中から感性に合うテーマを見付けられた方は幸せだと思う。
  そもそもWordPressのテーマ検索はショボい。何か想像と違ったり無関係なテーマが出てくるので、短気な人はもうこの時点でWordPress諦めるんじゃないかな。
  上記で取り上げた「Simplicity」もWordPressのテーマ検索では出て来ない（登録上の問題かも知れないケド）。似た名前の別テーマが出てきて、しかも別にシンプルじゃなくて困惑した。
  んなわけで、WordPressのテーマ検索はオマケ程度に考えた方が良いんじゃないかな。

• テーマそのものを表す単語で探さない

  「シンプル」「ダーク」などテーマについて探すと、本当にただ「シンプル」「ダーク」なだけのテーマしか見付からない。概してそれらはカスタマイズ性を考えてなかったりする。
  シンプルもダークも詰まる所カスタマイズすれば良い話なので、デザインやカスタマイズ性で探した方がマシ。

• カスタマイズメニューやコード内コメントが自分の得意な言語のものを探す

  つまり大体の日本人なら日本語メニューや日本語コメント、日本語サポートなテーマが良い。この理由は明白で「後からカスタマイズする＝他人様のコードを読む」だから。
  後からカスタマイズする場合、英語が苦手ならどれだけレビューサイトで絶賛されていようが海外ユーザの作ったテーマはお勧め出来ない。

プラグイン

サイト構築にあたり、テーマだけで対応し切れない機能はテーマ自体をカスタマイズするか、プラグインで機能強化する。
さしあたり自分で使ってみて捗ったプラグインをご紹介。

なおこちらはテーマと違い、日本語以外のプラグインもばんばん使ってます。コードメンテするわけじゃないしね。

Akismet Anti-Spam

• Akismet - WordPress プラグイン

スパムコメント抑制。標準で入っており、これは登録を推奨。別途Akismetアカウントが必要になるケド、スパム対応を考えると安い手間です。
サイト構築から僅か3日間で300件近いスパムを掃除してくれた。Akismetの凄さと共に、こんな僻地まで爆撃してくるスパムやばい。

WP Multibyte Patch

• WP Multibyte Patch - WordPress プラグイン

日本語版WordPressなら標準で入ってるハズ。詳しい説明を読むと、メール送信エンコやファイル名サニタイズなど重要そうな不具合改修されてるので入れておくのが吉。

Google XML Sitemaps

• Google XML Sitemaps - WordPress プラグイン

Google Search Consoleなどの分析サイトに送るサイトマップを生成してくれる。

JP Markdown

（202006追記）久々にWordPress更新しようとしたらうまく動かなくなっていました。残念。。。代替プラグインは次項参照。

• JP Markdown - WordPress プラグイン

Wikiで見られるような記法を投稿や固定ページで使えるようにする。このプラグインではMarkdown記法で書けるようになる。
これ書くのに慣れが必要だけど、一度慣れるとビジュアルエディタ使うのが煩わしくなってくる。何たってマウス操作は面倒臭いものよね。

設定は特に無し。投稿や固定ページの編集画面で、テキストエディタのモードでMarkdown記法で書いて更新すればサイト表示時に反映されてます。

因みにこれ元は「Jetpack by WordPress.com」なるセキュリティ確保やトラフィック稼ぎの総合ツールから、機能別に割り出してくれたものらしい。有難うと言わざるを得ない。
なおこれと一緒にHighlight.js仕込むと良いんだけど、そちらはプラグインでなくテーマ搭載の方をカスタマイズして使う。詳しくは後程。

参考：

• WordPress に Markdown と highlight.js を導入 - アカベコマイリ

WP Githuber MD

• WP Githuber MD

WordPress v5.4.2-jaでJP Markdownが動かなくなってしまったので他のものは無いかと探して見付けたもの。Markdown入力モードにすると左ペインでMarkdown表記、右ペインでリアルタイムにプレビュー確認が出来てなかなかスゴイ。
但し若干挙動不審な点もあり、折り畳みモードなんかが文中に入っているとプレビューがうまく動かなかったり、保存すると表示が崩れたりする。。。このあたりは今後に期待。

参考：

• WordPressのエディターでMarkdown記法を可能にするプラグイン【WP Githuber MD – WordPress Markdown Editor】 | hirakublog ヒラクブログ

Link Library

• Link Library - WordPress プラグイン

標準のWordPressではガジェットにしかリンク情報を使えない。。。誰向けの機能だコレ？
そこでこちら、リンク集的な固定ページを作る時に便利。

なお設定項目は日本語化できるもよう。以下からDLして有難く使わせて頂きましょ。

• GitHub - jump-up/wordpress_plugin_Link-Library_ja.po-mo: translating file

DLしたファイルをそれぞれ次の要領でリネームし、 /wp-content/plugins/link-library/languages/ 以下に放り込めばOK。

• link-library-ja_JA.mo → link-library-ja.mo
• link-library-ja_JA.po → link-library-ja.po

参考：

• 多機能なリンク集作成／WPプラグイン「Link Library」 | 楽々WordPressプラグイン
• WordPressでリンク集を作るのに超多機能な「Link Library」プラグインの翻訳ファイルをとりあえず作ったので添削お願いします

Table of Contents Plus

• Table of Contents Plus - WordPress プラグイン

丁度このページもそうだけど、文章が長くなると目次が欲しくなる。けれどMarkdownを使うと見出しにアンカータグが付かないため、手動ですら目次リンクは作れない。
そんな場合でも目次の文言を見て無理矢理アンカータグを付け、自動で目次を作成してくれる。

参考：

• WordPressにページ内リンク（目次）を簡単に設置出来るプラグインTable of Contents Plus | ホームページ作成ソフト.net
• 【Wordpressプラグイン】目次の作り方 - 自動で作成、デザインカスタマイズも楽々！

Custom Upload Dir

• Custom Upload Dir - WordPress プラグイン

WordPressに画像ファイルをアップロードすると、通常は年月別フォルダに格納されるため、CMS用途なんかの場合は非常に整理し難い。で、これを使うと投稿や固定ページからの画像ファイルアップロード時にパス設定に沿ってフォルダ分けをしてくれる。
パーマリンク設定と同じにしておけば、パーマリンクと似た感じ（実際は余計なフォルダ階層も付いてくるケド）の画像リンクでメディアを扱えるようになる。

参考：

• 画像を年月フォルダでなく、カテゴリ別フォルダで管理する方法 | Snagimo

Media Library Filter

• Media Library Filter - WordPress プラグイン

上記「Custom Upload Dir」と一緒に使うと便利。メディアをカテゴリやタグで検索できるようになる。シンプルだけど絞り込みに使う分には十分。

参考：

• メディアライブラリにカテゴリーとタグでの絞り込み検索を追加するWordPressプラグイン「Media Library Filter」 | TechMemo

Simple 301 Redirects

• Simple 301 Redirects - WordPress プラグイン

これ入れた理由は後の方で説明するけれど、WordPress内の特定URLを301リダイレクトするためのプラグイン。設定ページがシンプルで判り易い。

参考：

• WordPressでURLを別のURLにリダイレクト（自動転送）する方法 | まろろぐ

Download Manager

• Download Manager

最近またPython弄り始めて、読込ファイルのサンプルファイルなんかをWordPress上に置きたいナーと思って探したプラグイン。
メディアに.accdbファイルとか置こうとすると通常はセキュリティエラーになって置けないんだけど、このプラグインを使うことでアップロード出来るようになり、更にダウンロードリンクまで作ってくれる。reCAPTCHAにも対応して悪質bot防いでくれるし、DL履歴も保持できてフリー版でも十分過ぎる機能持ってて素晴しい！

参考：

• WordPressでのZIP・PDFファイルの配布方法 | Naokix.net

カスタマイズ

WordPress上で出来るようなカスタマイズは置いとくとして、ちょいと面倒な事しなきゃならんヤツをつらつらと。

sytle.css 上書き

先述の通り子テーマをインストールしたうえで、子テーマ上にあるstyle.cssを上書く。ただ、初期状態ではカラッポなのでどうすれば良いか迷う。
仕方が無いので、親テーマのCSSファイルから欲しい部分を貰ってきて修正する、という流れ。貰ってくるCSSはこんな感じかな？

• style.css
  • ほぼ全て
    。。。といっても多過ぎるので「基本設定（General Setting）」～「非表示にするものまとめ」あたりから欲しい部分を切り貼りしつつ試すのが良いかな。それでも十分多いけど。
    レイアウトなんかはあまり弄り過ぎると後で後悔する事も多いので、色設定くらいの操作に留めた方が良いかも。CSSファイル内を「color」「rgba」とかで検索して、ポイントポイント修正する形が怪我も少ないんじゃないかな。
• thread.css
  • 全て
    コメント欄のスタイルは別ファイルになってるので注意。子テーマのstyle.cssへ一緒にぶっ込む分には問題なく動くみたい。

あと追加で、この辺りも追加しとくと見栄えが良いかも。強調表示時の色と、折り畳み時の色。

.article strong, .article em {
  color: #eebbcb;/* 撫子色 */
}

.article details summary {
  color: #98d98e;/* 若緑 */
}

highlight.js の有効化

• 外観-カスタマイズ-ソースコード
  • ソースコードをハイライト表示: チェック
  • ハイライトスタイル: hybrid

これでコマンドやソースコードに色付けしてくれる。標準搭載はウレシイネ。
このコードハイライトというものも個人で結構好みが分かれると思うけれど、Googleサイト管理時代にMarkdown Hereからコードハイライトの素晴らしさを覚えたウチとしては highlight.js 推しです。
ついでに折角なのでウチとこのCSS設定をご紹介。hybridテーマを好みにカスタマイズしたものになります。style.cssにも「highlight.js用のスタイル」て項目あるんで、上書きすれば良いんじゃないかな。

/*
vim-hybrid theme カスタマイズ版
Original: w0ng (https://github.com/w0ng/vim-hybrid)
*/

/*background color*/
.hljs {
display: block;
overflow-x: auto;
margin: 0;
padding: 1px;
background: #2b2b2b;/* 黒 */
}

/*selection color*/
.hljs::selection,
.hljs span::selection {
background: #007bbb;/* 紺碧 */
}
.hljs::-moz-selection,
.hljs span::-moz-selection {
background: #007bbb;/* 紺碧 */
}

.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}

.hljs-meta {
color: #a3a3a2;/* 薄墨色 */
}

/*foreground color*/
.hljs,
.hljs-setting .hljs-value,
.hljs-expression .hljs-variable,
.hljs-expression .hljs-begin-block,
.hljs-expression .hljs-end-block,
.hljs-class .hljs-params,
.hljs-function .hljs-params,
.hljs-at_rule .hljs-preprocessor {
color: #dddcd6;/* 絹鼠 */
}

/*color: fg_yellow*/
.hljs-title,
.hljs-function .hljs-title,
.hljs-keyword .hljs-common,
.hljs-class .hljs-title,
.hljs-decorator,
.hljs-tag .hljs-title,
.hljs-header,
.hljs-sub,
.hljs-function {
color: #f2f2b0;/* 女郎花 */
}

/*color: fg_comment*/
.hljs-comment,
.hljs-javadoc,
.hljs-output .hljs-value,
.hljs-pi,
.hljs-shebang,
.hljs-template_comment,
.hljs-doctype {
color: #b28c6e;/* 柴染 */
}

/*color: fg_red*/
.hljs-number,
.hljs-symbol,
.hljs-literal,
.hljs-deletion,
.hljs-link_url,
.hljs-symbol .hljs-string,
.hljs-argument,
.hljs-hexcolor,
.hljs-input .hljs-prompt,
.hljs-char {
color: #e95464/* 韓紅 */
}

/*color: fg_green*/
.hljs-string,
.hljs-special,
.hljs-javadoctag,
.hljs-addition,
.hljs-important,
.hljs-tag .hljs-value,
.hljs-at.rule .hljs-keyword,
.hljs-regexp,
.hljs-attr_selector {
color: #aacf53;/* 萌黄 */
}

/*color: fg_purple*/
.hljs-variable,
.hljs-property,
.hljs-envar,
.hljs-code,
.hljs-expression,
.hljs-localvars,
.hljs-id,
.hljs-variable .hljs-filter,
.hljs-variable .hljs-filter .hljs-keyword,
.hljs-template_tag .hljs-filter .hljs-keyword {
color: #a59aca;/* 藤紫 */
}

/*color: fg_blue*/
.hljs-statement,
.hljs-label,
.hljs-keyword,
.hljs-xmlDocTag,
.hljs-function .hljs-keyword,
.hljs-chunk,
.hljs-cdata,
.hljs-link_label,
.hljs-bullet,
.hljs-class .hljs-keyword,
.hljs-smartquote,
.hljs-method,
.hljs-list .hljs-title,
.hljs-tag {
color: #89c3eb;/* 勿忘草色 */
}

/*color: fg_aqua*/
.hljs-pseudo,
.hljs-exception,
.hljs-annotation,
.hljs-subst,
.hljs-change,
.hljs-cbracket,
.hljs-operator,
.hljs-horizontal_rule,
.hljs-preprocessor .hljs-keyword,
.hljs-typedef,
.hljs-template_tag,
.hljs-variable,
.hljs-variable .hljs-filter .hljs-argument,
.hljs-at_rule,
.hljs-at_rule .hljs-string,
.hljs-at_rule .hljs-keyword {
color: #c1e4e9;/* 白藍 */
}

/*color: fg_orange*/
.hljs-type,
.hljs-typename,
.hljs-inheritance .hljs-parent,
.hljs-constant,
.hljs-built_in,
.hljs-setting,
.hljs-structure,
.hljs-link_reference,
.hljs-attribute,
.hljs-blockquote,
.hljs-quoted,
.hljs-class,
.hljs-header {
color: #f8b862;/* 萱草色 */
}

.hljs-emphasis
{
font-style: italic;
}

.hljs-strong
{
font-weight: bold;
}

あと折角なのでMarkdown Hereもこちらにご紹介。
Googleサイトのページ編集画面やGmailのメール編集画面など、リッチテキストエディタ上でMarkdown書式⇔リッチテキストの双方向変換（といってもMarkdown書式を基本情報にして表示を切り替えるだけみたい）を実現するスグレモノのブラウザ用アドイン。 highlight.js とも連携しておりコードハイライトも利くので結構お勧めです。

まあ、生成されるリッチテキストのソースは結構泥臭いんだけれども。

• Markdown Here

固定ページリンクにカテゴリ一覧リンクを設ける

拙サイトは見ての通りブログよりCMS寄りなので、ページ構成もこんな感じに固定ページで分けて、中身を投稿で登録している。

玄関 (固定ページ)
書斎 -Coding- (固定ページ)
├ bash (投稿)
├ Python (投稿)
…
└ Java雑記 (投稿)
電気室 -Computer- (固定ページ)
…
Link (固定ページ)

情報整理するためのサイトだし、各カテゴリは章節分けして自分でリンクページを書きたくてこうした。テーマ機能で上部メニューへ順序属性順にリンク作ってくれて便利だし。
さてここで「書庫 -Book-」みたくブログ的なモノが欲しくなって。日記みたいなモノだから固定ページと同列でカテゴリ記事一覧が欲しい。

理想としては固定ページ上に [category_list id="XXX"] みたいな感じでカテゴリ記事一覧が取得できる事だけど、残念乍らそんな機能も無く。
カスタマイズやプラグイン使う手も色々あるけれど、個別にHTML/CSSスタイルを作らなきゃ駄目だったりで、折角標準のカテゴリ記事一覧があるんだしデザインを別管理にしたくない。

結果出した答えがダミーの「書庫 -Book-」固定ページを作り、「Simple 301 Redirects」でカテゴリ一覧のURLへリダイレクトする方法。
リンクを見れば解るけれど、拙ページ上部メニュー「書庫 -Book-」はダミーで /redirect_book/ → /category/book/ のリダイレクトをかけてます。

これなら .htaccess 修正しても良いんだけど、普段WordPressから管理するのに .htaccess だけFTPでアップロード管理なんて絶対忘れるし、管理統合の目的でプラグイン使うことに。
またこうするとSEO的に問題があるかも知れないけれど、楽だしまあ良いやって。

トップページ（固定ページ）にコメント欄を付ける

玄関にご記帳頂きたいナーと思って。でもテーマの構造上、固定ページにコメント欄を付ける機能は持たせてないそうな。
でもこれはサポートフォーラムにズバリな記事があったので、そちらを参考に修正。親テーマから page-page.php を持ってきて、好きな箇所に以下のソースを追記して子テーマにコピー。

<?php //// page-page.php ?>

<?php // 固定ページ用コメント ?>
<?php if ( is_page() ): ?>
  <hr />
  <section id=”under-entry-body”>
  <?php
    if ( is_comments_visible() ) {//コメント・コメント欄を表示するか
      comments_template(); //コメントテンプレート
    }
  ?>
  </section>
<?php endif;//is_page ?>

参考：

• 固定ページにコメント欄を表示させたい

Markdownで画像リンクを短縮

Markdown記法で何が不便って、サイズ変更した画像リンク貼るのが非常に面倒。たとえばこのページで画像リンクを貼ろうとするとこうなる。

[<img alt="火鉢" width="100" src="/wp/wp-content/uploads/dev/wordpress/hibachi.jpg">](/wp/wp-content/uploads/dev/wordpress/hibachi.jpg)

火鉢

Markdownではそもそも画像のサイズ指定が出来ないので <img> タグ使うのは仕方無いにしても、長い。せめてディレクトリ階層部分くらい縮められないか。。。と思って調べたけれど、そのものズバリな答えは見付からず。で、ウチなりに考えてこんな処理を加えてみた。
もしもっとスマートな方法があれば是非教えてください。

<?php

//// functions.php

/**
 * 各種文字列置換関数
 */
function my_replace_content($arg) {
    $result = $arg;

    /**
     * '/wp/wp-content/uploads/dev/wordpress' → メディアライブラリDir への文字列置換
     * ※ "Custom Upload Dir" 使用かつ "/%category%/%postname%/" パーマリンクで動作確認済。
     */
    $updir = wp_upload_dir();
    $path = preg_replace('|(https?://[^/]+)(.*)|', '$2', $updir['baseurl']) .                   // アップロードURLの内部Dir生成
            preg_replace('|(https?://[^/]+)(.*[^/]+)(/?)|', '$2', get_permalink($post->ID));    // パーマリンク部分の切り抜き

    $tmp = uniqid(rand());
    $out = str_replace('@D_PrmMed', $tmp, $result);   // エスケープ処理
    $out = str_replace('/wp/wp-content/uploads/dev/wordpress', $path, $out);       // キーワード変換
    $out = str_replace($tmp, '/wp/wp-content/uploads/dev/wordpress',$out);         // エスケープ処理
    $result = $out;

    return $result;
}
add_action('the_content', 'my_replace_content');
?>

これで以下のような書き方で画像リンクが書けるようになった。これくらいならまだ許せるかな。

[<img alt="火鉢" width="100" src="/wp/wp-content/uploads/dev/wordpress/hibachi.jpg">](/wp/wp-content/uploads/dev/wordpress/hibachi.jpg)

なお、/wp/wp-content/uploads/dev/wordpressと書きたい時は @D_PrmMed のようにエスケープしてやればOK。

参考：

• 【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法 - WordPressサイトの制作ならOffise Kondo

青空文庫風にルビを振りたい

つまり 漢字（かんじ） → <ruby><rb>漢字</rb><rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby> への文字列置換。漢字（かんじ）みたいにルビが振れる。

これも上記と似たようなモノですが preg_replace() で一斉変換かけちゃいます。こっちの関数はエラー起こすと NULL 返すんで、その時は置換かける前の文字列のまま返せば表示上問題なし。
説明の便宜上分けてますが、 $result = $arg; ～ return $result; 間は上記コードと一緒くたに書くことで1つの関数で両方面倒見てくれて便利なんじゃないかな。どうかな。

なお、漢字（かんじ）と書きたい時は ｜漢字《かんじ》 のようにエスケープしてやればOK。

<?php

//// functions.php

/**
 * 各種文字列置換関数
 */
function my_replace_content($arg) {
    $result = $arg;

    /**
     * `漢字（かんじ）` → <ruby><rb>漢字</rb><rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby> への文字列置換
     */
    $tmp = uniqid(rand());
    $out = str_replace('｜', $tmp, $result);          // エスケープ処理
    $out = preg_replace('/(|[^｜]*)｜([^｜《》]+)《([^｜《》]+)》([^｜]*)/u',
                        '${1}<ruby><rb>${2}</rb><rp>（</rp><rt>${3}</rt><rp>）</rp></ruby>${4}',
                        $out);                          // キーワード変換
    if($out != NULL) {
        $result = str_replace($tmp, '｜', $out);        // エスケープ処理
    }

    return $result;
}
add_action('the_content', 'my_replace_content');
?>