タグ: wordpress

投稿日:

WordPressの一般設定にあるURLをhttpsに変える

証明書の自動更新まで設定し終わった段階で、https化の作業は終わったと思っていたのですが、
まだ残っているのがありました。

WordPressにログインし、一般設定を見ると、
WordPress アドレス (URL)　と サイトアドレス (URL) という設定を見ると、
どちらも https://analytics-note.xyz と、httpのURLが設定されてしまっていて
しかも網がかかっていて修正ができません。

記事中でブログ内でリンクを貼る時など、いろんな場面で利用する設定のようで、
このままでは不都合ありそうです。

WordPressの日本語ドキュメントの一般設定から引用します。

WordPress のアドレス(URL)
WordPressのコア・アプリケーションのファイル（たとえばwp-config.php, wp-admin, wp-content, wp-includesなど）を含むディレクトリの正式なURLを入力します。たとえば、あなたが「blog」という名前のディレクトリにWordPressをインストールした場合は、WordPressのアドレスはhttp://example.net/blogとなります（example.netは利用者のドメイン名です）。もしも、WebサイトのルートにWordPressをインストールした場合は、このアドレスはhttp://example.netとなります。URLの最後にスラッシュ（/）を付けた場合は自動的に省かれます。wp-config.php ファイル内で WP_SITEURL 定数を定義すると、定義した値がこのフィールドに入り、管理画面から編集することはできません。

サイトアドレス(URL)
WordPressサイトを呼び出す時に、ブラウザに閲覧者が入力するURLを入力します。このURLは、WordPressのindex.phpがインストールされているディレクトリです。 WordPress を専用ディレクトリに配置する場合以外は、ブログのアドレス（URL）と前述のWordPressのアドレス（URL）が同一です。URLの最後にスラッシュ（/）を付けた場合は自動的に省かれます。wp-config.php ファイル内で WP_HOME 定数を定義すると、定義した値がこのフィールドに入り、管理画面から編集することはできません。

要するに、 wp-config.php で設定されていると管理画面から変更ができないそうなので、
wp-config.php から編集します。

参考:サイト URL の変更

編集するファイルは
/opt/bitnami/apps/wordpress/htdocs/wp-config.php
です。
中に確かに次のような記載がありました。


define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');

これを下記のようにhttpsに書き換えます。


define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');

保存したら自動的に反映されたようです。

投稿日:

Googleアナリティクス導入

ドメインも取得し、https化も済んだのでこのブログのURLがある程度固まります。
この段階で、今後アクセスを分析するためにGoogleアナリティクスを導入しておきます。
実はGoogleアナリティクスの学習/実験環境を手に入れるのがこのブログの目的の一つでもあります。

アカウント作成手順は非常に簡単で、
Googleアナリティクスで検索して出てきたページにアクセスし、Gmail等で利用しているアカウントでログインします。
あとはアカウント名、サイト名、トップページURLを入力して終わり。
つまずくとしたら、アカウント名に何を入れたらいいかくらいだと思いますが、これは本当になんでもよく、あとで変えられるようです。

ブログ側に設定するため、トラッキング IDという UAと数値で構成されたIDを取得し控えておきます。
これを ALL in One SEO というbitnamiのWordpressに初めから入っているプラグインに設定して完了。

GAのリアルタイム画面で自分のアクセスが検知できればテスト完了です。

投稿日:

Lightsailにドメインを設定する

Route53で取得したドメインをこのサーバーに紐付けます。

ちなみにドメインの登録については最大3日かかると書いてありましたが、
メールアドレスの認証が済んだら数分後には完了し、
Route53のResistered domains に表示されていました。

ドメインは登録しただけだと使えないので作業を進めます。
公式ドキュメントはこちら
Amazon Lightsail の DNS ゾーンを作成する

DNSゾーン作成手順

  1. Lightsailのホーム画面で、[ネットワーク]を選択。(ドキュメントにはDNS ゾーンと書いてあるが)
  2. DNSゾーンの作成をクリック
  3. ドメイン名を入力
  4. [DNSゾーンの作成]をクリック

この段階では、Wordpressのサーバーと、DNSゾーンがそれぞれ独立して存在するだけで、
このドメインでブログにアクセスすることはできないようです。
続けてレコードの追加という作業が必要になります。

DNS ゾーンにレコードを追加する手順

  1. +レコードの追加をクリック
  2. Aレコードを作成。解決先にblogの固定IPアドレスを入れる(プルダウンから選べる)

Aレコードを作成するとき、サブドメイン無しのURLを使いたい場合は、
サブドメインに@を入れるといいようです。(ポップアップの吹き出しで指定されました)

他のサイトをみてみると、 www.ドメイン名 を サブドメインを含まないドメイン名のみのアドレスに
紐づける設定(CNAMEレコード)を設定していることが多いようですが、
必要性がなさそうなのでそれは設定しませんでした。

この後、画面に表示されている通り
ドメインプロバイダにネームサーバーを設定してあげる必要があります。
Lightsail側に4個表示されているので、これをコピーしてRoute53に持っていきます。

Route53のドメインにネームサーバーを設定

  1. Route53の管理画面にアクセスし、ドメインを選択
  2. Add or edit name serversをクリック
  3. 設定済みのものを消して書き換える
  4. [update]をクリック

Your request for update nameserver was successfully submitted. You will receive an email when it is done.
と表示されたので、メールを待ちます。

少し長めに待ち時間がかかって、ドメイン名でアクセスできるようになりました。

wordpressの管理画面にも自サイトのURLを指定するところがあるので設定変更が必要、
と思っていたのですが勝手に反映されていました。
Lightsailの機能でしょうかね。

投稿日:

トップページ右下に出てくるbitnamiのバナーを消す

ブログの右下がペロッとめくれた見た目になり、bitnamiのバナーが見えているのでこれを消します。

公式マニュアルの方法はこちら。
Remove The Bitnami Banner

サーバーにSSHでログインして、以下のコマンドを実行して設定変更とサーバー再起動を行います。
公式キュメントで、 APPNAME と書かれてる部分は wordpressですね。


sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
sudo /opt/bitnami/ctlscript.sh restart apache
投稿日:

syntax highlighter の Prismjsを導入

今後プログラムを含む記事が増える予定なのでsyntax highlighter を導入しました。
色々方法があるようですが、とりあえず検索した中で比較的評判の良かったprismjsを採用します。

公式サイト

Prismjsの導入

WordPress用に Prism For WP というプラグインがあるようなのでこれをインストールして有効化。
設定画面で、利用予定の言語(Pythonなど)にチェックを入れました。
MarkupというのがHTMLらしいです。

行番号表示機能も使いそうなので、Select Pluginsの Line Numbers にもチェック。
また、Normalize Whitespace を有効化しておくと先頭行の不要な空白を消してくれるそうです。

Prismjsの使い方

ソースコードをpreタグとcodeタグで囲み、preタグのclassにline-numbers、codeタグのクラスにlanguage-x(xは言語名)を設定します。

HTMLで使用した例


<pre class="line-numbers"><code class="language-markup">
    ここにHTMLのソースコードを書く
</code></pre>

Pythonで使う場合は language-python。使ってみた例。

記事に書いたコード


<pre class="line-numbers"><code class="language-python">
a, b = 0, 1
for _ in range(10):
    a, b = b, a + b
    print(b)
</code></pre>

表示結果


a, b = 0, 1
print(b)
for _ in range(10):
    a, b = b, a + b
    print(b)

ちなみにサンプルのプログラムはフィボナッチ数列を出力します。

投稿日:

Amazon Lightsail で WordPressサイトを作成する手順

要するにこのブログのサーバーを立てたときのメモです。
ある程度記事が貯まるまでは集客もSEOも考えてないので数日はドメイン無しで運用中。

公式ドキュメント

元々の手順が簡単なうえ、上記の各ドキュメントがわかりやすいのでほぼ迷わず作業完了しました。

サーバー作成手順

  1. AWSコンソールにログイン
  2. 全てのサービスのコンピューティングにある Lightsail を選択
  3. インスタンスタブの[インスタンスの作成]ボタンをクリック
  4. インスタンスロケーションを確認(東京)
  5. インスタンスイメージの選択画面で、下記の通り選択
    • Linux/Unix
    • アプリ+OS
    • wordpress
  6. インスタンスプランの選択 (今回は一番安いのを選択)
  7. インスタンスに名前を付ける
  8. [インスタンスの作成]ボタンをクリック

静的IP作成手順

  1. Lightsailの管理画面で、ネットワークタブを選択
  2. 静的IPの作成ボタンをクリック
  3. 静的 IP をアタッチする Lightsail リソースを選択
  4. 静的 IP に名前を付け、[作成] をクリック

アクセスとログイン

Lightsailのホーム画面から作成したインスタンスを選ぶと、作成したIPアドレスを確認できます。
ブラウザのURLにIPアドレスを入力すると、 自分のwordpress画面にアクセスできる。

また、Lightsailのホーム画面からサーバーにブラウザ上でSSH接続可能。
Lightsail の右上のアカウントから、SSHキーをダウンロードし、接続することもできる。

SSH接続するとホームディレクトリに
bitnami_application_password
というファイルがあり、この中にログインパスワードがある。
ちなみにユーザー名は user

関係ないですが、以前 RedmineをLightsail で立てたときに
初期生成されているユーザー名がわからず苦戦したことがあります。