WordPressのテーマに子テーマを設定する

ほとんど初期設定で運営しているこのブログのデザインなのですが、将来的にはより読みやすい形へのカスタマイズもしたいと思っています。
その場合、子テーマというのを使ってそれをカスタマイズするのがお作法らしいです。

メインのテーマが、WordPressが用意してくれている、 Twenty Seventeenなのですが、これが時々バージョンアップがあり、
子テーマを作っておかないと、その度に自分のカスタマイズ分がリセットされるからだそうです。
(このテーマ特有の事象ではなく、自作ではないテーマを使う人全体に言えることです。)

ということで、子テーマの設定をしました。
なお、このブログのサーバーには、 Amazon Lightsail を利用しています。

子テーマの作成にあたって参照したドキュメントはこちらです。
子テーマ – WordPress Codex 日本語版

管理画面からGUIで作れると思っていたのですが、サーバーに入って作業が必要みたいですね。
まず、ディレクトリ作成からです。 wp-content/themes ディレクトリ下に、親テーマと並列で子テーマのディレクトリを作ります。
(親テーマの配下ではないので注意が必要です。) Lightsail の場合、 wp-content/themes は次の場所にあります。
このディレクトリを探すのにも少してこずりました。

~/apps/wordpress/htdocs/wp-content/themes/
直下に親テーマになる twentyseventeen のフォルダもあります。

ここに、ディレクトリを掘って、style.css, functions.php の2ファイルを作ります。


$ mkdir twentyseventeen-child
$ cd  twentyseventeen-child
$ touch style.css
$ touch functions.php

そして、作った2ファイルに内容を書きます。
まず、style.css の方は、スタイルシートヘッダで始める必要があるそうです。(今回は子テーマ作るだけなので、スタイルシートヘッダだけです。)
具体的にどう書くかは、ドキュメントの記載例に加えて、親テーマのstyle.cssも見ながら次の様にしました。
Template行は、親テーマのディレクトリ名を指します。この例では親テーマが Twenty Fifteen テーマですので、Template は twentyfifteen です。別のテーマが親テーマの場合、該当のディレクトリ名を指定してください。
とある通り、 Template行 が重要です。僕は最初、何も考えずに親テーマのヘッダーをコピーしただけで済ませようとして、Template行がなくてハマりました。


/*
Theme Name: Twenty Seventeen Child
Author: Yutaro
Author URI: https://analytics-note.xyz/
Template: twentyseventeen
Version: 2.3
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty-seventeen-child
*/

次は、 functions.php です。 これはドキュメントに指示された通り次の様に書きます。
<?php の部分重要です。PHP の開始タグではじめろとドキュメントの説明にはありますが、コードの例には入っていません。


<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

ここまで済ませばあとは管理画面から作業できます。
左ペインの外観を選ぶと、空っぽのテーマができているのでこれを有効化するだけです。
いくつかの設定がリセットされてしまうので、それは再設定が必要になります。
(このブログでいえば無効にしていたヘッダー画像が復活するなど。)

WordPressの記事URL変更のためにリダイレクトの設定をする

ずっとこのブログのカテゴリを整理したかったのですが、先延ばしにしているうちに「プログラミング」の記事が150を超え、
このブログの半分程度をしめるようになってしまいました。

明確に困るということはないのですが、もう少しカテゴリーを整理したいと思っています。
その時に問題になるのがパーマリンク(URL)です。

このブログではパーマリングにURLを含めているのでカテゴリーを見直すとURLが変わってしまいます。
そうなると、せっかく検索などから訪問してくれる人がいらしても目的のページにたどり着きませんし、
各記事間のリンクもリンク切れになってしまいます。

そこで、ありきたりな方法ですがリダイレクト設定を入れていくことにしました。
手軽に設定する方法を調べたところ、
Redirection というプラグインが定番のようなのでこれを使います。
参考 : Redirectionプラグインのページ

いつものように、Wordpress管理画面の左ペインのプラグインから、新規追加で検索してインストールと有効化します。
ツールのところに Redirection が現れたので選択。
みたところ、初期設定が必要なようでした。

オプションとして、次の3項目がありました。
Monitor permalink changes in WordPress posts and pages.
Keep a log of all redirects and 404 errors.
Store IP information for redirects and 404 errors.

どうやらパーマリンクの変更を勝手に検知して設定を入れてくれたり、404エラーを監視してくれたりするようです。
実はリンク変更時の設定は全部手作業でやらないといけないといけないと勘違いしていたので非常にありがたいです。
チェック入れて進みます。(後でも変更できるそうです)

最後に、既存の設定をインポートするかどうか聞かれて終了になりました。
(既存の設定に何も心当たりがなかったのですが、以前タイプミスして一瞬だけ間違って公開し、すぐ修正したULRが取り込まれました。)

これであとは、リダイレクト元とリダイレクト先のURLを設定していけば、使えます。

設定画面からログの保存期間等も設定できるので、慣れるまでは長めに保存するよう変えておきました。
(デフォルト 1週間、 設定変更後 1ヶ月)

WordPressにお問い合わせフォームを作る

このブログに問い合わせフォームをつけることにしたのでその手順のメモです。
複数のプラグインがあるようですが、比較的情報が多かった Contact Form 7 を使うことにしました。

まずはプラグインをインストールします。
– ダッシュボードの左ペインのプラグインをクリック
– Contact Form 7 を検索
– 今すぐインストールボタンからインストール
– インストールしたら有効化ボタンをクリック
– 左ペインに お問い合わせ メニューができたことを確認

新しくできた お問い合わせメニューを選択すると、最初からコンタクトフォーム1というフォームができていました。
設定項目がたくさんあるのですが、ざっと見た限りではそのまま使って問題なさそうなのでデフォルトで使います。

このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください:
というコメントの下に貼り付け用のコードがあるのでそれをコピーします。

これをブログ内のどこかに貼れば完成するのですが、サイドバーに置くことにしました。
ウィジェットの一覧から「テキスト」を選択し、ブログサイドバーに追加します。
そして、テキストの本文部分に先ほどの貼り付け用のコードを挿入して完成です。

あとは各ページに表示されたので送信テストを行いました。

WordPressでコメントのブラックリストを登録する方法

まだ公開しているコメントは一つもいただけていない本ブログですが、実はスパムのような投稿は日々投稿されています。
キーワードやIPアドレスにもだいぶ法則性が見えてきたのでそろそろ対策することにしました。

(日本語設定している場合)
Wordpressの管理画面の左ペインで、「設定」 => 「ディスカッション」 と選ぶと、
コメントブラックリスト という設定項目があります。

説明にある通り、ここによく貼られているURLやIPアドレスなどを入れておけばそのコメントは自動的にゴミ箱に入るようです。
このブログの趣旨に沿ったコメントであれば確実に登場しないような単語をいくつかピックアアプして設定しておこうと思います。

コメントの内容、名前、URL、メールアドレス、IP アドレスに以下の単語のうちいずれかでも含んでいる場合、そのコメントはゴミ箱に入ります。各単語や IP アドレスは改行で区切ってください。単語内に含まれる語句にも一致します。例: 「press」は「WordPress」に一致します。

Page Analytics でGoogle アナリティクスの情報を可視化する

プライバシーポリシーに書いている通り、このブログにはGoogle アナリティクスを導入しています。
日々のアクセス数が見れて、僕のモチベーションに大いに貢献してくれています。

このGoogle アナリティクスの情報ですが、Chromeの拡張機能を使うと、GAのサイトに行くことなく、自分のブログ上に表示することができます。
(所有者にしか使えないので、ぜひご自身のサイトでお試しください。)

その拡張機能がこちらです。
Page Analytics (by Google)
Chromeでリンク先へ遷移し、拡張機能をインストールするとURLバーの右にオレンジのアイコンが追加されます。
自分のサイトを開いた状態でこれをONにすると、そのページのアクセス情報が観れるという優れものです。

各リンクのクリック率をページ上に可視化したり、クリック率によって着色したりできて楽しいでおすすめです。

プライバシーポリシーページを更新しました

このブログのフッターからアクセスできるプライバシーポリシーページを実態に合わせて更新しました。
もともとwordpressがデフォルトで作成した英語のページがあったのですが、
今回日本語で作っています。

手順

  1. wordpressの管理画面の左ペインの設定内にあるプライバシーを選択
  2. プライバシーポリシーページを変更する の 新規ページを作成
  3. 作成されたページを実態に合わせて編集

初期設定のページは英語だったのですが、サイト設定を日本語にしているせいか、新規作成したページは日本語でした。
ただ、内容がかなり充実しすぎていて関係ない記載も多々あったのでそれらは削除し、
コメントに関する記載だけ残しています。

そこに、アクセス解析のため入れているGAのことを記載して完了です。

Google アナリティクス利用規約
7. プライバシー に明記されていルルールにちゃんと対応できてないのを気にしていたのですが、これで一安心です。

お客様はプライバシー ポリシーを公開し、そのプライバシー ポリシーで、お客様がデータ収集のために Cookie を使用していることを必ず通知するものとします。

LaTeXで行列の成分を省略したときのドットを書く

大学院生のときは頻繁に書いていたのに、すっかり忘れてしまっていたので$\LaTeX$の復習です。

まず、要素を省略せずに3*3行列を書く例。

$$
\textbf{A} =
\left(
\begin{array}{ccc}
a_{11} & a_{12} & a_{13} \\
a_{21} & a_{22} & a_{23} \\
a_{31} & a_{32} & a_{33}
\end{array}\right)
$$

結果。
$$
\textbf{A} =
\left(
\begin{array}{ccc}
a_{11} & a_{12} & a_{13} \\
a_{21} & a_{22} & a_{23} \\
a_{31} & a_{32} & a_{33}
\end{array}\right)
$$

次に、ドットを使って書く例。
横並びは\cdots, 縦並びは\vdots, 斜めは\ddots を使います。


$$
\textbf{W} =
\left(
\begin{array}{ccc}
w_{11} & \cdots & w_{1n} \\
\vdots & \ddots & \vdots \\
w_{n1} & \cdots & w_{nn}
\end{array}\right)
$$

結果。
$$
\textbf{W} =
\left(
\begin{array}{ccc}
w_{11} & \cdots & w_{1n} \\
\vdots & \ddots & \vdots \\
w_{n1} & \cdots & w_{nn}
\end{array}\right)
$$

サーチコンソールに登録する

まだほんの数名のようですが、このブログにも検索から来てくださる人が現れ始めたようです。

今の所、手元のメモ書きを適当に転記して記事にしているような状態なのですが、
ニーズのある記事を優先して上げたほうがいいと思いますのでどんなキーワードで検索されているのかは確認したいところです。
ということで、サーチコンソールを使い始めました。

以下が導入手順です。

    1. サーチコンソールのサイトにアクセス
    2. 今すぐ開始 ボタンをクリック
    3. Google Search Console へようこそのダイアログにサイトURL入力(https://analytics-note.xyz/)
    4. プロパティを追加ボタンをクリック

本当はこの後、サイトの所有権を確認して登録完了の予定だったのですが、
次のメッセージが表示されて自動的に登録完了しました。
同じアカウントでGAを使っていると自動的に確認してくれるようです。

所有権を自動確認しました
確認方法:
Google Analytics

ただし、次のメッセージも表示されたので念のためやっておきます。

確認状態を維持するために、gtag.js トラッキング コードを削除しないでください。
確認状態を維持するために、設定 > 所有権の確認 で複数の確認方法を追加することをおすすめします。

設定 > 所有権の確認 > HTMLタグ
と選択すると、下記のタグが表示されます。


<meta name="google-site-verification" content="ここにキーが表示される"/>

このキーの部分をWordpressの All in One SEO Pack の Google Search Console: の設定に追加して完了です。

SNSシェアボタンを追加しました

数日前からこのブログの各記事にSNSへのシェアボタンを追加しました。

ボタンの追加はWordpressの、AddToAny Share Buttons というプラグインを使っています。

とりあえずほとんどデフォルト設定のままで、変更したのはLineへのシェアボタンを表示した点だけです。

WP Mail SMTPを設定してLightsailのwordpressからメール送信できるようにする

WordPressには、コメント等があったときにメール通知する機能があるようなのですが、
メールサーバーが設定されておらず、これまでメールが送信できないようになっていました。

今後使えた方が便利なので、yahooメールを使ってメール送信するように設定します。
まず、
WP Mail SMTP というプラグインを有効化します。
Lightsailのwordpressの場合、最初からインストールされていて、無効状態で存在ます。

有効化したら設定です。

送信元アドレス: 自分のyahooメールのアドレス。
If you using an email provider (Gmail, Yahoo, Outlook.com, etc) this should be your email address for that account.
とある通り、普段使用しているえメアドを使う必要があります。
送信者名: ここはおそらくなんでもいいはず。僕はブログタイトルにしておきました。

メーラー: Other SMTP
SMTPホスト: smtp.mail.yahoo.co.jp
Yahooメールのヘルプページで指定されています

暗号化: SSL
SMTPポート: 465
Auto TLS : ON
認証 : ON
SMTP Username : yahooメールのユーザー名 (@より前の部分)
SMTO Password : yahooメールのパスワード

これでプラグインの設定完了です。

次に一般設定に移ります。

メールアドレス、をデフォルトから自分のメールアドレスに変更すると、
メールアドレスの確認メールが届き、SMTPの設定がうまくいったことが確認できます。
また、その確認メール内のリンクをクリックすると今後の通知がそのアドレスに届くようになります。