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のメールアドレスを確認する

受け取りが可能なメールアドレスか確認します。
もし、受け取りできないメールアドレスやほとんど使用していないアドレスだった場合など、変更したい場合は任意のメールアドレスに変更します。
その後、「一般設定」画面の最下部にある「変更を保存」ボタンをクリックし、メールアドレスを変更保存します。

パスワードを忘れたときのパスワードリセットは他にも方法は有りますが、パスワード変更URLをメールで送ってもらうやり方が一番簡単なので、必ず受け取り可能なメールアドレスを設定するようにしましょう。

以上、WordPress メールアドレスの設定は大切!でした。

WordPressのWebサイトをスパムから守る「Akismet」プラグイン

WordPressで最初に入れるプラグイン

WordPressのWebサイトをスパムから守る小技というか、必須のプラグイン「Akismet」の紹介です。

この「WordPressでブログ」WebサイトでもAkismetプラグインを使っています。
その効果は、
「Akismet は、1,527件のスパムコメントからあなたのサイトを保護しました。現在16件のコメントをスパムとして捕らえています。」
となっています。

この「WordPressでブログ」Webサイトはほとんどアクセスが無いにも関わらず、スパムコメントだけには!人気なんですね。。。情けない(´Д`)ハァ…

で、本題に戻ると、このAkismetプラグインですが、
迷惑なスパムコメントを自動的に判定して振り分けてくれます。
自動判定してくれるので、自分で見て削除する必要がないので、管理者の運用をとっても助けてくれます。
WordPressをインストールするとデフォルトで入っています。
また無料(personal plan)でできるし、WordPressを運営している会社が提供・管理しているので安心です。

使用するにはユーザー登録(APIキーの入手のため)が必要ですが、そんなに難しくないので、必ず使用しましょう。

「WordPress Akismet」で検索すると、APIキーの入手や設定方法が丁寧に書かれたページがすぐに出てくるので検索してみてください。

以上、WordPressのWebサイトをスパムから守る「Akismet」プラグインの紹介でした。

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の現在のバージョンを確認する

WordPressの現在のバージョンを確認する

WordPressの現在のバージョンの確認は、ダッシュボードから行うことができます。

WordPressの現在のバージョン

WordPressの現在のバージョン

ダッシュボードクリックすると、概要の下に現在のバージョンが表示されます。
現在は、4.5.2です。
WordPressのバージョンによっては表示個所やオプションで非表示になっている可能性もありますので、概要の下に表示されなければ探してみてください。

今回は、左にバージョンアップの更新が出ているため更新します。

更新後のバージョンは以下の通りです。WordPressの現在のバージョン

無事に4.5.3に更新されました。

以上、WordPressのバージョンを確認するでした。

WordPress アイキャッチ

WordPress アイキャッチ とは、WordPressの Webサイト ( ブログサイト )の投稿記事(投稿 ページ )や 固定ページ において、 トップ部分 に表示される、 人目を引く 画像 ・ 写真 ・ 動画 などのことを言います。

Webサイト ( ブログサイト )のページ( 投稿ページ ・ 固定ページ )を表示したときに、「 一番最初に人の目線を捕えるもの 」という意味で、 アイキャッチ と呼ばれています。

WordPress アイキャッチ 目的

アイキャッチは、記事の内容を判りやすくするための手段です。 アイキャッチ の メディア は 画像 ・ 写真 や 動画 が使われます。

一目で読み手の心を惹きつけ、 投稿ページ へ誘導する。
と、言うと格好良すぎますね^^;

でも、 投稿ページ の内容に沿って画像や写真を表示することで、 投稿ページ の内容をイメージ で読み手へ伝える、内容への興味が高まり離脱させない、など役割が有るので、そのような 画像 や 写真 を貼れるのが一番です。
しかし、なかなかそういう 画像 や 写真 って無いですよね。。。

それでも写真が有れば雰囲気も変わるし、そこそこの目的達成でも マイナス にならなければ アイキャッチ を貼るのは良いことだと思います。

WordPress アイキャッチ 画像

WordPress 4.2.2 では、右下に アイキャッチ画像 を設定できる箇所が有るので、そこで アイキャッチ画像 を設定します。

設定と言っても 投稿ページ に画像を張り付けるのと同じやり方なので、難しくはないです。

アイキャッチ 画像の大きさ( Twenty Fifteen )

私の使っている Twenty Fifteen では、画像のデフォルトの大きさが決まっていて変更できないようです。
Twenty Fifteen には大きな アイキャッチ が一番上に表示されます。

推奨サイズは 幅 825px に高さ 510px らしいです。この サイズ の画像を使用するときれいに表示されます。
逆にこれ以外の サイズ の画像を使うときは、 カット されてしまうらしいので、 プレビュー でチェックしてください。

他の テーマ ではまた違うと思うので、 テーマ ごとに確かめてください。

アイキャッチ 画像の位置や大きさを変更したい

Twenty Fifteen で アイキャッチ を 文章 の横に 表示したい とか有ると思います。
実際に私もそうしたい気持ちも有ります。
今はそこまでスキルが無いのですが、スキルのあるWordPress上級者なら出来ると思います。なので、誰かが情報提供してくれるのを待つか、自力で試行錯誤するか。。。悩み中です。

あとは、テーマを変えてしまうの手も有りますが、今のところは引き続き Twenty Fifteen で行きたいと思っています。

もう一つ思いつくことは、Twenty Fifteen の場合、タイトルの下になりますが、手動で画像を入れるという手も有るのかも。
この辺りは今から試行錯誤で、思う感じになるように頑張ってみます。

WordPress 投稿ページと固定ページの使い方

こんにちは!
WordPressの固定ページって使ってますか?どんな時に使うんだろうって、WordPressを使い慣れてきてても思うとき有りますよね。WordPressの
今回はWordPressをより広く使うために投稿ページ固定ページの使い方について説明します。といっても概念だけなので身構えずに、「なんだ〜そんな感じなんだ」程度の理解で十分です。
実際に使うときはまた具体的な例を出して説明していきたいと思います。

投稿ページと固定ページ

ご存じのとおり、WordPressには投稿ページと固定ページが有ります。
Webサイト(ブログサイト)を図書館に例えてみます。
投稿ページは、本や雑誌、その他CDやDVDと言ったものです。
固定ページは、図書館を利用するために便利な案内情報と言ったところで、ご利用案内、フロア情報、本のジャンル情報、検索情報と言ったサポートを行うものです。

イメージは掴めましたか?
あなたが一生懸命に作成した「投稿ページは本や雑誌」です。そして「固定ページは本や雑誌を使いやすくサポートする案内情報」というイメージです。

投稿ページとは

では、具体的にWordPressの投稿ページの特徴を見てみましょう。
投稿の新規追加から作った投稿ページ(記事)は、カテゴリーページやタグページと紐づき自動的にトップページにも表示されます。

また、WordPressの投稿ページにはRSSの生成がされるので、新着情報の発信などにも向いています。

このことから投稿ページとは、Webサイト(ブログサイト)の趣旨に関わる情報発信を行うページで、作成後自動で表示され、新着情報などにも有利なページです。

固定ページとは

次に、具体的にWordPressの固定ページの特徴を見てみましょう。
固定ページ機能を使って、固定ページを作成するとページ属性を選ぶことによって自由にレイアウトやデザインを変えたページを作ることができるようになります。ただし、そのような機能を持ったテーマを選ぶか、自分で固定ページのテンプレートを作成し登録すれば、ですが。

WordPressの固定ページは投稿ページ(記事)と異なり自動で最新に表示されることは有りません。その代り自分で表示するように手配する必要が有ります。
メニューに組み込んだり、他の固定ページから呼ばれるようにしたり。

このことから固定ページとは、Webサイト(ブログサイト)全体の情報に関わる情報発信を行うページで、Webサイト(ブログサイト)の趣旨ページだったり、問い合わせページだったり、カテゴリー表示でもゴチャゴチャになってきた場合は固定ページでどうにかしたりする時に便利なページです。

固定ページを使いこなすには、WordPressやPHP、CSSにを固定ページのテンプレートが作れる程度に精通する必要が有ります。
一晩で勉強できるほど簡単なものではなさそうですが、固定ページを上手く利用してより良いWebサイト(ブログサイト)を作ることはとても大切なことです。
少しずつでも良いので、WordPressやPHP、CSSの学習を行いましょう。

WordPress プラグイン WP Multibyte Patchについて

WP Multibyte Patchをとりあえず有効にしておきましょう。
詳しい理由はわかりませんが、文字化け防止と文字の取り扱いで不具合が起きないようにしてくれているみたいです。

WP Multibyte Patchとは

WP Multibyte Patchのプラグインの説明に「詳しい説明を読む」と言うのが有るので、そこを読むとなんとなくわかった気がするようになります。
なので、気になる方はそこを読みましょう。一応リンクを張っておきます「WP Multibyte Patch

私なりに簡単にかいつまんで言うと、上にも書きましたが「文字化け防止と文字の取り扱いで不具合が起きないようにしてくれる」プラグインです。
基本的に必須のプラグインと考えています。

WP Multibyte Patchを有効にするには

ダッシュボード>プラグイン>インストール済のプラグインからWP Mulibyte Patchを「有効化」をクリックするだけです。
全く難しくありません。

WP Mulibyte Patchで困ること

この記事を書いたのは私と同じWordPress初心者にWP Mulibyte Patchを有効にしましょうとの啓蒙も有ったのですが、気になる話も有ったので。

それはビジュアルエディターのメニューが真っ白、もしくは四角い箱のみになったという話を聞きました。実は私もその現場を見ました。IEではほぼ真っ白に、Chromeでは四角い箱だけになって並んでいました。

実際は、マウスカーソルを上にあてるとポップアップで説明が表示されるので、だいたいは感で操作可能のようでしたが、初心者だとちょっと辛いかも。。。と言うことで。

それを見たとき、お願いをしてWP Mulibyte Patchをアンインストールしてもらいました。そしてその後すぐにインストールしました。
結果は正常にビジュアルエディターのメニューが表示されるようになりました。

もし、同じことが起きている人が居たら、ダメもとで再インストールしてみてください。

インストールする時は、ダッシュボード>プラグイン>新規追加で、WP Mulibyte Patchを検索します。トップに表示されるのでそのままインストール、有効化するだけです。

重要なプラグインだけに何か影響が出ると怖いですよね。
もし、有効化していない人がまだ居たらすぐに有効化しましょう。