WordPress のテーマとプラグイン
テーマ選び
今回については、できるだけ早く WordPress でサイトを立ち上げ、情報発信をすることを重視していたので、極力自分でカスタマイズしなくても使えることをテーマ選びの基準にしていました。とはいえ、どんなテーマでも良いというわけではなく、以下のものを選定基準にしました。
- SEO の内部対策がされている
出力される HTML が文法的に正しいか、パンくずリストなど内部リンクが増える仕組みになっているか、など。meta description の個別設定などは、All in One SEO Pack などのプラグインを導入することで対応できますが、出力される HTML を後から修正するのは難しいので。 - スマートフォン対応（できれば AMP 対応）
サイトにもよりますが、閲覧者の4〜6割程度がスマートフォンからのアクセスなので、レスポンシブ対応は必須レベルです。可能であれば、AMP（Accelerated Mobile Pages。Google が推奨しているモバイルコンテンツを高速に表示させるためのフレームワーク）に対応したページを出力できることが望ましいといえます。 - 表示が高速である
SEO の観点からも UX の観点からも、表示が高速であることは望ましいとされています。せっかく表示が早くなるようにサーバを選んでいるのに、テーマのせいで表示が遅くなっては身も蓋もありません。 - シンプルなデザイン
このあたりは好みもありますが、シンプルなデザインのほうが HTML の構造が整っていて、カスタマイズしやすい気がします。 - きちんとメンテナンスされている
WordPress 本体が頻繁にアップデートされるので、メンテナンスされていないテーマだと、長い間使っているうちに表示が乱れたりする可能性があります。コンスタントにテーマがアップデートされているもののほうが安心です。 - 無料である
優れた有料のテーマがたくさんあるのは知っていますが、いきなり有料テーマはハードルが高い、ということで、まずは無料のテーマの中から探すことにしました。
これらの条件を満たしそうな国産テーマの有名どころは
あたりです。おそらくどれを選んでもハズレはないと思いますが、Cocoon は広告関連の機能が充実しているのでアフィリエイター向け、Xeory Base や LION BLOG はコンテンツマーケティング向けな気がします。
このサイトでは、Luxeritas を利用しています。表示の高速化に対する熱意を感じたことと、技術系の記事を書く際になくてはならないシンタックスハイライトが標準装備だったことが個人的にありがたかったので。あとは、テーマ配布サイトの猫がかわいい（笑）。
インストールしたプラグイン
いろいろな機能があらかじめ用意されている Luxeritas なので、インストールしたプラグインも最小限です。
- LiteSpeed Cache
LiteSpeed サーバに対応したプラグイン。キャッシュ機能や画像の最適化、データベースの不要データの削除などがまとまっているので、WP-Optimize や EWWW Image Optimizer などを追加でインストールする必要がありません。 - IP Geo Block
IP アドレスによるアクセス制限をかけるプラグイン。主に外国からのアクセスを遮断し、コメントスパムなどを防ぐために使います。 - WebSub/PubSubHubbub
サイトの更新を通知するための技術のひとつである WebSub（PubSubHubbub）を Google などに送るためのプラグイン。これによって検索エンジンへのインデックスを促進する効果が期待できます。 - XML Sitemap & Google News
XML サイトマップを自動で作成してくれるプラグイン。こちらも検索エンジンへのインデックスを促進するために使います。 - No Category Base (WPML)
通常は /category/カテゴリ名 となるカテゴリのパーマリンクを /site-building こんな感じにしてくれるプラグイン。 - WordPress Popular Posts
人気の記事を表示してくれるプラグイン。 Luxeritas で使う場合には、設定を少し変更したり、CSS を変更する必要があります。このあたりの情報は検索すると色々出てきます。
CSS の修正
色の調整などを行いました。こんな感じ。
/* 見出しをメインカラーに */
.home h2,
.archive h2,
#side .widget h3,
.single h1 {
color:#a7b87b;
}
/* カテゴリー名をメインカラーに */
.home .category,
.page .category,
.archive .category,
.meta-box .category,
.home .category a,
.page .category a,
.archive .category a,
.meta-box .category a,
.home .fa-folder,
.page .fa-folder,
.archive .fa-folder,
.meta-box .fa-folder {
color:#a7b87b;
text-decoration:none;
}
/* 記事を読むの矢印を消す */
.read-more-link i {
display:none;
}
/* フッターのコピーライト表示を白に */
#footer .copy {
color:#ffffff;
}
/* トップページとアーカイブページ：ページネーションをメインカラーに */
.pagination .active span {
background-color:#a7b87b;
}
.pagination li a:hover {
background-color:#a7b87b;
color:#fff;
}
/* 新着記事 */
.new-title a {
color:#a7b87b;
}
.new-title a:hover {
color:#ffa01b;
}
/* サイドバー：タグ色の変更 */
.widget_tag_cloud a {
border:none;
background-color:#999;
color:#fff;
}
.widget_tag_cloud a:hover {
background-color:#000;
}
@media (min-width: 768px) {
.widget_tag_cloud a {
font-size:13px !important;
}
}
/* タグ名の色変更 下線消去 */
.meta-box .fa-tags,
.meta-box .tags,
.meta-box .tags a {
color:#ffa01b;
text-decoration:none;
}
/* 記事作者名の色変更 下線消去 */
.meta-box .fa-pencil,
.meta-box .author,
.meta-box .author a {
color:#165e83;
text-decoration:none;
}
/* 「よろしければシェアお願いします」の下線色変更 */
.sns-msg h2 {
border-bottom:solid 5px #E9F707;
}
/* 投稿ページ：ページネーションのホバー色を変更 */
#pnavi a:hover {
color:#ffa01b;
}
/* 関連記事の文字色及び記事名のホバー色を変更 */
.related {
color:#a7b87b;
}
.excerpt h3 a:hover {
color:#ffa01b !important;
}
/* 固定ページの投稿更新日時・作成者の非表示 */
.page .meta,
.page .meta-box {
display:none;
}
/* 記事名のホバー色を変更 */
.entry-title a:hover {
color:#ffa01b !important;
}
/* popular Post */
.wpp-post-title {
color:#a7b87b;
font-size: 14px;
font-size: 1.4rem;
font-weight: 700;
padding: 0;
margin: 0 0 5px;
line-height: 1.4;
text-decoration: none;
}
.wpp-excerpt {
display: block;
margin: 0;
padding: 0;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.4;
}
.wpp-views {
font-size:1.3rem;
line-height:1.4;
color:grey;
}
ul#popular-posts.wpp-list li img {
border-radius: 5px;
border: 1px solid #ddd;
padding: 1px;
margin: 0 10px 0 0;
width:auto;
height:auto;
}
ul#popular-posts.wpp-list {
counter-reset: pupular-ranking;
}
ul#popular-posts.wpp-list li {
position: relative;
padding: 15px 10px;
border-top:0;
border-bottom: 1px dotted #ccc;
}
ul#popular-posts.wpp-list li:last-child {
border-bottom: none;
}
.wpp-list li {
overflow: hidden;
float: none;
clear: both;
}
.wpp-thumbnail {
display: block;
float: left;
}
a.wpp-post-title {
padding: initial !important;
}おまけ（シンタックスハイライトの定義の追加）
上にも書いたように、Luxeritas には標準でシンタックスハイライトの機能がついていて、主要な言語についてはブロックの追加からシンタックスハイライターを選び、右側のオプションで言語を選択すれば OK です。
このシンタックスハイライトの機能は、Prism というライブラリを使って実現されているので、Luxeritas では用意されていない言語でも、Prism のサイトに掲載されているものであれば、割と簡単に追加できます。
定義をダウンロードして追記する
- Prism のダウンロードサイトにアクセスし、追加したい言語以外のチェックを外してダウンロードする。
- ダウンロードした prism.js をテキストエディタで開くと、4行目以降に追加したい言語の定義が書かれているので、コピーする。
- Luxeritas のメニューから【子テーマの編集】→【Javascript】のタブを選択し、そこに 2. でコピーした定義を貼り付ける
例えばこんな感じ（YAML の例です）。
/*
* フッターに 追加したい Javascript 等を以下に記述してください。
* ( To add Javascript in the footer, please write down here. )
*/
Prism.languages.yaml={scalar:{pattern:/([\-:]\s*(?:![^\s]+)?[ \t]*[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)[^\r\n]+(?:\2[^\r\n]+)*)/,lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:/(\s*(?:^|[:\-,[{\r\n?])[ \t]*(?:![^\s]+)?[ \t]*)[^\r\n{[\]},#\s]+?(?=\s*:\s)/,lookbehind:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?)?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?)(?=[ \t]*(?:$|,|]|}))/m,lookbehind:!0,alias:"number"},boolean:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:true|false)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},null:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)(?:null|~)[ \t]*(?=$|,|]|})/im,lookbehind:!0,alias:"important"},string:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)("|')(?:(?!\2)[^\\\r\n]|\\.)*\2(?=[ \t]*(?:$|,|]|}|\s*#))/m,lookbehind:!0,greedy:!0},number:{pattern:/([:\-,[{]\s*(?:![^\s]+)?[ \t]*)[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+\.?\d*|\.?\d+)(?:e[+-]?\d+)?|\.inf|\.nan)[ \t]*(?=$|,|]|})/im,lookbehind:!0},tag:/![^\s]+/,important:/[&*][\w]+/,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},Prism.languages.yml=Prism.languages.yaml;
実際に使うときには
追加した言語は、Luxeritas のシンタックスハイライターブロックからは選択できないので、カスタムHTMLのブロックを使います。
<pre class="wp-block-luxe-blocks-syntaxhighlighter line-numbers language-yaml"><code class="language-yaml">
font:
normal:
family: Myrica M
size: 14.0
</code></pre>こんな感じで pre タグと code タグで挟んであげれば、シンタックスハイライトされます。
この記事を書いた人
“ Webに悩むお客さまの「よき隣人」でありたい ” をモットーに、Web システム開発（主に Laravel）、Web マーケティング支援の仕事をしています。お仕事のご依頼・ご相談はこちらからお気軽にどうぞ。