WordPressのSSL化

WordPressのSSL化

ブログも今や常時SSL をすることが望まれる時代になってきました。
Google社はSSLで保護されているWebサイトかどうかを検索順位を付ける際の要素とすると言っていますし。
また、WordPress環境を提供してくれるレンタルサーバー会社も無料のSSLを提供してくれるなど、常時SSL化の流れができているようです。

WordPressのSSL化の方法

WordPressをSSL化は、以下の手順で行います。
1)SSLサーバー証明書の入手/設定
2)WordPrssでの設定

SSL証明書の入手/設定

まずは、SSL証明書を入手する必要があります。
現在は、無料のものもありますし、もちろん有料のものもあります。

一方、最近はWordPress環境を提供してくれるレンタルサーバー会社も無料のSSLを提供してくれるところがあります。
私が使用している、IXWebHosting + StarDomain の組み合わせでもSSL化できます。
また、最近契約した StarServer では、ボタンクリックのみでSSLの環境を提供してくれます。
StarServer では、StarDomain 契約で StarServer で DNS を管理している場合にのみですが、SSL証明書入手して、そのままWebサーバーに設定するまでの作業を自動で行ってくれます。

自分の環境に合わせ、SSL証明書を手に入れ、Webサーバーに設定します。

参考までに StarDomain での「Let’s Encryptで無料のSSLを取得する」を紹介しておきます。
また、「IX Web Hosting SSLを設定する(初回設定)」も合わせて紹介しておきます。

WordPrssでの設定

プラグインでの設定が一番間違いないと思います。
お勧めのプラグインは Really Simple SSL です。
Really Simple SSL は、設定なしでサイトを SSL 対応にする軽量プラグインです。

その他のお手軽な方法は.htaccessを使う方法があります。
httpからhttpsへの301リダイレクトさせます。
リダイレクトの設定は.htaccessに以下のように追加します。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://(ドメイン名)/$1 [R=301,L]

その後、WordPressの設定→一般のWordPress アドレス (URL)とサイトアドレス (URL)を Https に書き換えます。
また、内部で参照している画像等を http → https にしないと「保護されていません」とか「i」表示とかになり、「保護された通信」となりません。
チェックの仕方はありますがかなり面倒かと。。。
チェックの仕方は Google chrome の場合は、「F12」を押し、「console」を見るとエラーや警告が色づけされ表示されます。
一枚を直すのは苦じゃないですが大量にあると苦行になります。。。

Really Simple SSL の設定方法

プラグインの新規追加から Really Simple SSL を検索し、インストールします。

WordPressSSL化-Really Smiple SSLインストール

WordPressSSL化-Really Smiple SSLインストール

インストール後、有効にするボタンをクリックします。

WordPressSSL化-Really Smiple SSL有効化

WordPressSSL化-Really Smiple SSL有効化

すると、以下のような確認メッセージとともに表示されますので、

Really Simple SSL - SSLを化有効にする

Really Simple SSL – SSLを化有効にする

「はい、SSLを有効化します」ボタンをクリックします。

以上でSSL化が有効化され、かつ http から https への 301リダイレクト されるそうです。

また、上の.htaccess で行った時と決定的に違うのが、内部で参照している画像等を http → https に自動で行ってくれるので修正する必要がありません。
非常に便利です。

念のため、WordPressの設定→一般のWordPress アドレス (URL)とサイトアドレス (URL)を Https に書き換えましょう。

以上、WordPressのSSL化の紹介でした。

Google Analytics トラッキング コードの設定 方法

Google Analytics トラッキング コードの設定 方法

今回は子テーマをせっかく作ったのでそれを利用してGoogle Analytics トラッキング コードの設定 をします。

ちなみに良く見かける方法は、親テーマの「header.php」へ直接書き込んだりする方法です。
もちろん手軽ではありますが、親テーマのアップデートでコードが無くなってしまいます。

それから、プラグインでGoogle Analytics トラッキング コードを設定する方法もありますが、プラグインって何かと問題を起こすし重くなるので、ほんとうに使いたい機能以外は極力避けたいと思っています。
これは好みの話なので、プラグインを使ってももちろんOKだと思います。
検索してみると下の2つが良く使われているプラグインみたいです。
・Google Analytics by Yoast
・All in One SEO Pack

子テーマを使った Google Analytics トラッキング コードの設定

では、初心者にもわかる「子テーマを使ったトラッキング コードの設定」を紹介します。
子テーマに便利な「functions.php」ファイルがあります。
このファイルには自分で関数を定義追加することができます。
なので、自分でGoogle Analytics トラッキング コードをheadに貼り付ける関数を登録してしまおうという方法です。

『twentyelevenの子テーマの作り方』『twentyseventeenの子テーマの作り方』の方法で子テーマを作ってあると「functions.php」が作ってあるはずです。
親テーマのスタイルシートを読み込む際に以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんと言われています。
親テーマのスタイルシートを読み込む正しい方法は、子テーマの 「functions.php」 で wp_enqueue_script()を使用する方法です。したがって子テーマには 「functions.php」 を作成する必要があります。

で、その「functions.php」にしたのコードのようにコピペするだけです。

//Gole Analytics Code設定
function set_gac() { ?>
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');

    </script> 
<?php }
add_action('wp_head', 'set_gac');

これで親テーマがアップデートされても上書きされないのでメンテナンスが楽になります。

以上、子テーマを使ったGoogle Analytics トラッキング コードの設定方法でした。

twentyseventeenの子テーマの作り方

twentyseventeenの子テーマの作り方

今回は、twentyseventeenの子テーマの作り方 を紹介します。
「twentyelevenの子テーマの作り方」はこちらまで

今回はサクッと一番簡単な作り方を紹介します。

子テーマ設置方法

子テーマ設置場所

子テーマを作成する最初の行程は、子テーマディレクトリの作成です。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます。

今回は、「twentyseventeen-child」という名前のディレクトリを「wp-content/themes」ディレクトリに作ります。
作り方は、FTPアプリやレンタルサーバのファイル管理アプリで作ります。
※子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。

子テーマ設置必須ファイル

子テーマは、2つのファイル「style.css」と「functions.php」を作成する必要があります。

まずは、「style.css」から作ります。

/*
 Theme Name:   Twenty SeventeenChild
 Template:     twentyseventeen
*/

Theme Name:Twenty SeventeenChild
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Template:twentyseventeen
親テーマのディレクトリ名。大文字小文字を区別するのできっち書くこと。
※全角文字を入れたときにはエディタの文字コードを UTF-8 にする必要があります。

次に、「functions.php」を作ります。
以前は「style.css」の中で @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではないそうです。
親テーマのスタイルシートを反映させる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
したがって子テーマには functions.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' );

}
?>

普通はこれで親のスタイルシート(「style.css」)を読み込んだ後に、子テーマのスタイルシート(「style.css」)を読み込み上書きされることになります。
しかし、なぜかうまく子テーマのスタイルシート(「style.css」)が読み込まれないパターンがあるそうです。
その際は、下のようにすると良いらしいです。

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

各々ファイルを保存したら、先ほど作った子テーマディレクトリへファイルをアップロードします。
と言うか、どんな方法でも良いので、先ほど作った子テーマディレクトリに2つのファイルを置ければOKです。
なお、エディタの文字コードを UTF-8 で保存しましょう。

子テーマの有効化

正常にアップロード出来たら、子テーマを有効化できる準備ができました。
サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。
子テーマが表示され、有効化できる状態になっています。

なお、 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
今まで触って居なければそのままでもOKです。
以上でtwentyseventeenの子テーマの設定ができます。
後は、自由にカスタマイズすればOKですので学習してカスタマイズしてください。

twentyeleven の 子テーマ の作り方

twentyelevenの子テーマの作り方

今回は「twentyeleven」の子テーマの作り方を紹介します。
そもそも 子テーマ とは、親テーマ(今回はtwentyeleven)と呼ばれる別のテーマの機能とスタイルを継承して、必要な部分だけ変更するテーマです。
既存のテーマを変更する方法として、子テーマが推奨されています。

子テーマ の有用性

子テーマの有用性は、親テーマがアップデートされてもカスタマイズ(変更)が消えない点にあります。

親テーマ(twentyeleven)は頻繁にアップデートされます。
それはとてもありがたいことですが。。。しかし、、、
自分で編集したファイルも上書きされてしまい、カスタマイズも無かったことにされてしまいます。

子テーマはそれを防いでくれる良い方法なのです。
子テーマがすべてを防いでくれるわけではありませんが、初心者レベルのカスタマイズなら問題ないでしょう。

子テーマ設置方法

子テーマ設置場所

子テーマを作成する最初の行程は、子テーマディレクトリの作成です。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます。

今回は、「twentyeleven-child」という名前のディレクトリを「wp-content/themes」ディレクトリに作ります。
作り方は、FTPアプリやレンタルサーバのファイル管理アプリで作ります。
※子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。

子テーマ設置必須ファイル

子テーマは、2つのファイル「style.css」と「functions.php」を作成する必要があります。

まずは、「style.css」から作ります。

/*
 Theme Name:   Twenty ElevenChild
 Template:     twentyeleven
*/

Theme Name:Twenty ElevenChild
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Template:twentyeleven
親テーマのディレクトリ名。大文字小文字を区別するのできっち書くこと。
※全角文字を入れたときにはエディタの文字コードを UTF-8 にする必要があります。

次に、「functions.php」を作ります。
以前は「style.css」の中で @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではないそうです。
親テーマのスタイルシートを反映させる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
したがって子テーマには functions.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' );

}
?>

普通はこれで親のスタイルシート(「style.css」)を読み込んだ後に、子テーマのスタイルシート(「style.css」)を読み込み上書きされることになります。
しかし、なぜかうまく子テーマのスタイルシート(「style.css」)が読み込まれないパターンがあるそうです。
その際は、下のようにすると良いらしいです。

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

各々ファイルを保存したら、先ほど作った子テーマディレクトリへファイルをアップロードします。
と言うか、どんな方法でも良いので、先ほど作った子テーマディレクトリに2つのファイルを置ければOKです。
なお、エディタの文字コードを UTF-8 で保存しましょう。

子テーマの有効化

正常にアップロード出来たら、子テーマを有効化できる準備ができました。
サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。
子テーマが表示され、有効化できる状態になっています。

なお、 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
今まで触って居なければそのままでもOKです。

WordPress サイトのバックアップ

WordPress サイトのバックアップ

WordPress サイトのバックアップ が必要な時の備忘録・メモです。

WordPressが異常を起こしたり、レンタルサーバが異常を起こしたり、ごくたまにですが確実に世界のどこかでWordPressのサイトが壊れています。そんな事態が私たちのサイトにいつ起こるかわからないので、日ごろから WordPress サイトのバックアップ を行うように心がけましょう。

WordPressのサイトのバックアップは、「データのバックアップ」と「Webサイトのバックアップ」の二つを行う必要が有ります。
その他にもリストアのやり方も覚えておいたり、備忘録・メモしておくと、いざと言う時にスムーズな復旧ができると思います。
が、私は面倒なのでリストアは、まだきちんと学習していません。
ただ、WordPressのサーバの引っ越しを行った経験も有り、バックアップさえあればどうにか復旧できるだろう程度に思っています。

では、まずは「データのバックアップ」から

データのバックアップ

データのバックアップとは、データベースのバックアップを取ることになります。
何か問題が生じた場合でも、このバックアップからデータベースを復元できます。

バックアップを実際に取る際は、使用しているレンタルサーバのMySQLにアクセスするツールを使用することになります。
私の場合は、ExpressWebというレンタルサーバを使用しているので、ExpressWebレンタルサーバから提供されているツールphpMyAdminを使用することになります。
WordPress サイトのバックアップ porting03

  1. データベースを選択
  2. 上部に有るエクスポートタブをクリックしてエクスポート画面を表示
  3. 対象テーブルを選択。基本的に全てですが、他のアプリのテーブルが入っている場合などは除外します
  4. 出力形式はSQLを選択
  5. ファイルに保存するにチェック。ローカルPCにSQLファイルがダウンロードされます。ダウンロードされるのでダウンロードされたファイルを後で確認します
  6. ファイル名を入力。後で見てわかり易い名前にします
  7. エキスポート実行。上の画面では隠れていて見えませんがすぐ下に有ります

実行ボタンをクリックすると、先ほど6のファイル名を入力で指定した名前でデータベースをバックアップしたSQLファイルがダウンロードされてきます。
以上で、データベースのバックアップは完了です。

次は、「Webサイトのバックアップ」です。

Webサイトのバックアップ

WordPressの構成を把握しているのであれば、必要なファイルのみをバックアップすれば問題ないのですが、はっきり言ってどのファイルを修正したかを覚えていないので、Webサイト全部を丸っとコピーが楽にです。
WordPressのバージョンで問題が出るのも嫌だし・・・・
丸っとコピーは、FTPでWebサイト全体をダウンロードするかレンタルサーバの機能でサイトをバックアップできるのならそれを使いかなどの手が有りますが、私はレンタルサーバの機能でサクッとダウンロードしています。

以上で、Webサイトのバックアップは完了です。

リストアはまたの機会に。。。

WordPressでfaviconを表示させる

favicon(ファビコン)とは、ブラウザのタグに表示されているWebサイト(ブログサイト)のタイトルの横やブラウザのアドレスバーに表示されるアイコンの事です。私の場合、白い一枚メモのようなアイコンが表示されています。なんかちょっと格好が悪いです。
そこでもう少しどうにか成らないかなって思って、デザインセンスは皆無ですが、favicon(ファビコン)作りと表示をがんばってみようかと思っています。
この記事を書いてる段階でまだ手付かずなので、失敗する可能性も有りますが、、、

favicon(ファビコン)とは

favicon(ファビコン)とは、ブラウザのタグに表示されているWebサイト(ブログサイト)のタイトルの横やブラウザのアドレスバーに表示されるアイコンの事です。
favicon(ファビコン)はブラウザに表示されるだけでなく、お気に入り等でブックマーク時のWebサイト(ブログサイト)のタイトルの横にも表示されます。

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして用いられておりWebサイト(ブログサイト)やウェブページに配置するアイコンの俗称です。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものです。

favicon(ファビコン)作成

私はWindows 8 を使っているので、ペイントブラシを使って画像を作成します。
ちなみにファビコンのファイル形式は次のようになっています。

  • ICO形式:複数の色数と解像度(16×16と32×32の4ビット16色、8ビット256色、24ビット1600万色、さらにWindowsでは24×24, 48×48, 64×64、Mac OS Xなどで利用される64×64と128×128サイズのものを任意の色数)を保存したものをマルチアイコンとして保存
  • GIF形式:16×16サイズで256色
  • PNG形式:16×16サイズで8ビット形式(256色)ないし24ビット形式

良くわからないのですが、favicon作成サイトで16x16、32x32、48x48の3つを指定されるようなので、とりあえず今回は上の3つの大きさのPNGを作成しました。

ペイントブラシでfavicon(ファビコン)のイメージ作成

ペイントブラシを立ち上げ、サイズ変更で160x160ピクセルの描画領域を作ります。
ペイントブラシでファビコン作成1

次に、絵を描きます。
私も適当に絵を描いてみました。

絵が完成したら、とりあえずファイルを保存します。名前は適当でOKですが私はfavicon.pngとしました。
次に、48x48ピクセルにサイズを縮小します。
ペイントブラシでファビコン作成2
ファイルを保存します。私はfavicon48x48.pngとしました。
同じ要領で32x32ピクセルのfavicon32x32.png、16x16ピクセルのfavicon16x16.pngを作成し保存します。

これで、3つのサイズのfavicon.pngが出来ました。

マルチアイコンのfavicon.icoを作る

favicon(ファビコン)の3つのイメージからfavicon.icoを作ります。
と言っても方法もツールも無いので、ググってみました。
有りました。
ファビコン favicon.icoを作ろう!」さんでお願いすることにします。よろしくお願いします。

早速、作ってみます。
マルチファビコン作成
先ほど作成した3つのイメージをそれぞれにセットします。
favicon.ico作成をクリック!
マルチファビコン作成2
少しすると、右側に作成結果が表示されます。
ダウンロードをクリックすると目的のマルチアイコンが頂けます。
改めて「ファビコン favicon.icoを作ろう!」さん、ありがとうございます。

faviconの指定方法

さて、「ファビコン favicon.icoを作ろう!」さんのおかげで、マルチアイコンを手に入れられたので、次は設置します。

favicon.icoによる方法

今回は「ファビコン favicon.icoを作ろう!」さんのおかげfavicon.icoを手に入れられました。ルートディレクトリに favicon.ico という名称のファイルを設置しておくと、HTML/XHTML中で指定が無くともfaviconとして認識するブラウザもあるとのことなのでこれで行こうかと。古いブラウザには表示されないかも。

HTMLやXHTMLで指定する方法

古いブラウザでも表示されるようにするには、HTML/XHTML内でhead 要素の内側で link 要素を次のように宣言します。単独でも効果はあるが、両方指定するのが望ましいとされるそうです。

  • <link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />
  • <link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon" />

ファイル名の決まりは特にないそうです。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのような形式を用いても良いそうです。ただし、Internet Explorerは10以下ではICO形式しか認識しないそうなので要注意です。IE11ではPNG、GIF(アニメーション非対応)に対応したそうです。

この辺りは詳しく調査していないので、興味のある方は更にググって調べてみてください。
私の方は、上の「favicon.icoによる方法」を試してダメだったら、「HTMLやXHTMLで指定する方法」で試そうと思っています。

 favicon.icoをルート直下に置いてみる

早速favicon.icoをルート直下に置いてみました。
結果からいうと。。。やりました!!。。。できました!!
もし表示されなかったら、ファイル名を確認して見てください。それからブラウザがキャッシュを持ったままだと、上手く行かないかも。。。でも、ちゃんとブラウザを落としてやり直したら上手く行くかも。それでもダメなら、「HTMLやXHTMLで指定する方法」で試してください。

デザインセンスが無いので格好良くないですが、これでオリジナルのファビコンが出来ました。「ファビコン favicon.icoを作ろう!」さん、本当にありがとうございます。