WordPress

[15分でサクっと]WordPressサイトのAMP化手順

サイトのAMP化を行いました。プリアンプでもメインアンプでもないよ!
方法を紹介しているサイトを探すのに手間取ったので、備忘録かねて分かりやすかったサイトをまとめて紹介します。

続きを読む

Xeory Base 0.1.8へアップデート(Googleアナリティクス要対応->改修済)

※2017.1.25追記 「Googleアナリティクスコードの再設定」について、コード修正されましたので対応不要になりました。

※この記事はWordPressをご利用の方向けの記事です。

当サイトで利用しているWordPressのテンプレート、バズ部さんのXeory Baseのアップデートが発表されていましたので対応しました。

子テーマの作成に成功、失敗していた要因は不明

WordPressを始めた当初、子テーマからのテンプレート編集を何度も試みたのですがうまくいかず、親テーマを直接いじっていました。

具体的には、子テーマをインクルードすると、親テーマは正常に認識している旨のメッセージが出るのですがいざプレビューするとスタイルシートが読み込めていないようで、ただのテキストサイトになっていました。

今回、とうとうアップデートが来てしまったか・・・と思い、またアップデート後の親テーマを一からいじるのは嫌だったので
子テーマに再度挑戦する or アップデートしない の2択で考えていました。

また、立ち上げたものの頓挫した別サイトがあったので(サーバー代が勿体ない・・・)、そこを実験台にして再度子テーマの設定を試みたところ、なぜかすんなりと上手くいきました。あれ?

手順としては、

  1. 新バージョンのxeory_baseをダウンロードし、xeory_base-childへリネーム
  2. screenshot.png(サムネイルファイル)とstyle.css を用意し、スタイルシートに以下を記載
  3. xeory_base-childをzipで圧縮
  4. 旧Xeory Baseテンプレートを削除(一旦別のテンプレに変える必要あり)し、新Xeory Baseと、xeory_base-childをそれぞれアップロード、xeory_base-childを有効化

これだけです。以前も同じ方法を取っていたはずなのですが・・・まあいいです。

子テーマのファイル一覧

  • comments.php (ファイル丸ごと上書き)
  • footer.php (ファイル丸ごと上書き)
  • functions.php (親テーマにない関数だけ記載)
  • single.php (ファイル丸ごと上書き)
  • style.css (ファイル丸ごと上書き)
  • screenshot.jpg
  • その他独自に作成したPHPファイル(front-page.php、各カテゴリページ用ファイルなど)

基本は子テーマのファイルを上書きしてくれるので、旧テーマで親ファイルを直接弄っていたファイルをそのままアップロードでいけました。
一応、一通りDiffソフトで旧バージョンとの差分を確認しながら、新テーマにコード変更があった場合は、新テーマのコードをベースにして独自の変更箇所を移管して利用しました。

Class名が変わるなど、スタイルシートに影響するような大幅な変更は特にありませんでした。

function.phpは特殊な追記が必要という説明も見かけましたが、元からある関数はいじってないのもあったので、単純に独自に追加した関数だけを書いておおけば上手くいきました。

思ったより子テーマファイルがすんなり出来てよかったですが、結局テーマのアップデート内容によってはそのまま子テーマを使いまわしという訳にもいかないので、多少のコード確認は毎回必要になりますね。

Googleアナリティクスコードの再設定が必要

※2017.1.25 追記
自分のミスだったらどうしようと思いながらバズ部さんにバグ報告として連絡したところ、すぐにコード修正しましたとの返信をいただきました(確認したところ、0.1.7と同じ表記に戻っていました)。バズ部さんの一ユーザへの丁寧な対応に感謝です。

アップデート完了後、メンテナンス画面はちゃんと無効にしたのにアクセス数がずっと0になってる・・・と思って設定を確認したら、アナリティクスコードの欄にタグ情報が、タグマネージャ欄が空白になっていました。

header.php は親テーマをそのまま継承しているのですが、以下のコードがアップデートに伴い変わっていたので、その影響で保持していたアナリティクスコードなどの情報が入れ替わったりしたのかな?と推測しています。

改めて、Google Analyticsのコードとタグを貼り付け直すことで、上手くいきました。

同じ事象になった方は試してみてください。

[WordPress]コメント欄の空白行(連続改行)が反映されない事象

WordPressをご利用の方向けの記事です。備忘録 兼 ぼやき。

コメント欄で空白行を入れても、投稿すると空白行が無視されてしまいます。

WordPreessコメント欄の改行(空白行)が反映されない

もうね、人の話聞いてる?って言いたくなりますね。腹が立ってEnterを連打してしまいます。

当初からこうだったのか、プラグインを色々入れている過程でこうなったのか、もはや覚えていないのですが

どうも、WordPressの自動整形機能が 邪魔を 仕事をしてくれているようで、連続した改行を入れると<p>~</p>で囲って段落処理してくれるようです。
そこまでしてくれるなら、段落間に余白入れてくれたらいいのに…

記事本文も同じく改行されない事象があったりするようなのですが、私のサイトではコメント欄のみです。テンプレート側で対処してくれてるのかな?

自力でコード書き換えようとしましたが、Class指定した<div>要素内の<p>要素ってCSSでどうやって指定するんだ、というところで躓いたので
こちらのサイトで紹介されているコードを使わせていただいたところ、見事に解決!

Ginpen.com – WordPressのコメント欄をタグ禁止とかにする。 

ちなみに、改行対策でよく紹介されている「PS Disable Auto Formatting」も一度入れてみましたが、解決するどころか既存コメントの<br>要素もすべて取り除かれて改行が一切無くなったので焦りました。

 

ところで、プラグインが気づけば30個近くになり、なるべく必要最低限に減らしておきたいものの
もう何がなんのプラグインか分からなくなっています。

説明の英語だけ読んでもパッと理解できないんですよね。
プラグイン同士のバッティングが起きるのも時間の問題です。

自分で説明書き付けれたらいいのに・・・と思っていたのですが、ありました、そんなプラグイン。

「Plugin Notes」、これが便利です。
日本語での紹介ページがまだ少ないですが、特に説明がなくても直感で使えます。

WordPressプラグイン一覧で説明を記述できるプラグイン

複数人での運営を想定して、記述者の名前も記録されるようになっています。
また、メモの背景色も複数用意されているので、コメント周り、本文の記事編集、スパム対処とか全体的なやつ、と色分けするとさらに分かりやすくなりますね。

入力したユーザー名や記入日を削除して行を少なくしたい場合は、plugin-notes.php の<span class=”wp-plugin_note_user”> や <span class=”wp-plugin_note_date”> を含む行を削除すると上手くいきます。

ちなみに、こちらも多数紹介されていた「Plugin Memorandum」ですが、WordPress 4.1以降で発生しているバグ対処用のコードを記述してもうまく使えませんでした。
「メモを更新」ボタンは表示されるようになりますが、メモを追加しても右上のアイコンに吹き出しマークが付かず、変更を認識してくれません。

[WordPress]記事一覧でカテゴリ名を色分け・文言を変えて表示する方法

WordPressを使っている方向けに、記事一覧を表示する際に、各記事のカテゴリ名も併せて表示させる方法を紹介します。

  • カテゴリページへのリンクあり/無しで表示する方法
  • カテゴリ毎に色を変えて表示する方法
  • カテゴリ名と、表示する文言を変える方法(カテゴリ名が長い方へおすすめ)

上の2つは他サイトでも紹介されていますが、3つ目は無かったので参考になる方がいれば幸いです。

カテゴリの表示(リンクあり・無し)

リンクあり

the_category(); でカテゴリ名を取得できます。自動的に、カテゴリページへのリンクも表示されます。

ただ、テキストの装飾がしづらくなるので、個人的にはあまり好きではありません(白文字にしたくて無理やり !importantを使っても変わってくれなかったり)

表示例
WordPressでカテゴリ名を表示する

リンク無し

get_the_category(); を使います。カテゴリーIDやカテゴリーの説明など様々な値を取得できます。今回はカテゴリ名 cat_name を取り出します。

記事タイトルを取得するget_posts()ループは省略していますが、1つ目のコードと同様です。

表示例
WordPressでカテゴリ名を表示する

カテゴリ毎に色を変えて表示する

このように、カテゴリ毎に色を変えて表示すると視覚的に見分けやすくなります。

表示例
WordPressでカテゴリ名を表示する

まず、get_the_category(); から記事のカテゴリスラッグ slug を取得し、変数catslugに格納しておきます。
カテゴリ名を囲うspanタグのclassにこのcatslugの値を使うことで、カテゴリ単位でCSSを適用できるようにしています。
先程と同様に、get_posts()ループの中で記述します。

※スラッグとは、urlで使う文字列のことです。投稿ページの「投稿」->「カテゴリ」にて、カテゴリ一覧の「スラッグ」という項目を確認して下さい。

リンクありで表示したい場合は、<!– 記事タイトル –> の <span>~</span> の間を <?php the_category(); ?> に置き換えてください。

次にCSSのサンプルです。floatを使わずシンプルにinline-block で並べています。
(本人もfloatの使い方が怪しくなったのが正直なところです…)

サンプルでは、”wordpress” “personal-diary” “childcare” がカテゴリスラッグにあたります。

カテゴリ名の文言を変えて表示

カテゴリ名が長い場合に、記事一覧に表示すると場所をとったり文字を小さくすると見にくくなったりしますよね。

WordPressでカテゴリ名を表示する

カテゴリ名は変えたくないけど、記事一覧で表示するときは文言をシンプルにしたい、という方にオススメです。
(ただし、ご紹介できるコードはリンク無しバージョンのみです。)

カテゴリ名をget_the_category(); で取得したあとに、if文を使って特定のカテゴリ名の時だけ、echoで出力する値を別途指定しています。カテゴリが3つ以上あるときは、elseif の行を増やしてください。

今までのコードの、<!– カテゴリ名 –> ~ <!– 記事タイトル –>の間のコードを以下と置き換えます。

まとめ

全部合わせると、以下のようになります。

参考になりましたら幸いです。

あとがき

今回、初めてコードを掲載する記事を書くにあたって、コードのを埋め込み方法としてはプラグインがメジャーのようですが、検索する中でプラグインレスのGistを使う方法が紹介されていたので、少し敷居が高い気もしたのですが挑戦してみました。

WordPressでコードをお手軽に表示するにはプラグイン要らずのGistがオススメ!シンタックスハイライトも最近の言語に即対応

見栄えもいいですし、コード管理も楽なのでこのまま使っていこうと思います。

ちなみにGistは、GitHub(ソースコード管理サービス)の提供する、断片コードの管理・共有サービスです。

私が以前に”GitHub”の名に触れたのは、GravatarがGitHubにも対応していた事と、ちょうど最近、元CHAGE and ASKAのASKA容疑者が再逮捕される前の電話取材にて「ギフハブという組織が・・・」といっていたのがGitHubの事なんじゃないかとニュースで取り上げられていた時ですね・・・。タイムリーなのか何なのか。

それにしても今は便利なコード管理ツールがあるんですね。学生時代の卒業研究でソフトを作っていた時のコード管理は単独作業であっても面倒だし、それは悲惨なものでした・・・。

[WordPress]ゲストの方のコメント欄でのアバター表示方法

コメント機能まわりを少し充実させてみました。

  • サイドバーの「最近のコメント」欄の表示内容の変更
  • コメント時に画像添付可に(JPEGのみ)
  • コメント追加時のメール通知機能を追加(任意)

メール通知機能はニーズがあるか分からなかったのですが、コメント返信があったかを都度見に来ていただいている方には便利かと思います。
各種メッセージを元の英語から翻訳はしていますが、わかりにくいところなどあったらご指摘いただければ全力で修正いたします。

 

さて今回は、当サイトでコメント頂く際のアバター(アイコン画像)を表示する方法をご紹介しますので、設定したい方はぜひお試しください。

続きを読む

[WordPress]カテゴリページの一覧を見やすく

カテゴリ別のページ、サムネイル+記事冒頭が読めるのはいいのですが
どうも縦に伸びてしまい、一覧性に欠けるので、トップページと同じようにタイトルのみ一覧で見えるよう変更しました。 続きを読む

トップページのデザインを変更しました

本サイトで利用させて頂いているWordPressのテーマ「Xeory」のトップページを
デフォルトから変更し、カテゴリ毎に新着記事が見えるようにいたしました。

スマホ・タブレット表示についても、余白や文字サイズを調整しております。

続きを読む