投稿一覧に記事閲覧数を表示する WordPress Poplar Post

投稿一覧に記事閲覧数を表示する WordPress Poplar Post

以前に『ページビュー数を確認するプラグイン「 WordPress Popular Posts 」』を紹介しました。
どの記事が良く読まれているか分かるようになりますし、サイトバーにも人気の記事を表示することができます。

今回は同じ WordPress Poplar Post の機能を利用して、投稿一覧に記事閲覧数を表示(追加)します。
記事一覧を見ると全く読まれていない、ほとんど読まれていない記事を確認することができるので、記事の見直しや最新情報に追加するなどテコ入れを行いやすくなります。

投稿一覧に記事閲覧数を表示する方法

WordPress Poplar Post の機能を使います。
WordPress Poplar Post が更新されてカスタマイズが消えないように子テーマの functions.php 内に追加を記述します。
書き方(追加プログラム)は下の通りです。

//投稿一覧に記事閲覧数を表示(追加)する
//WordPressPoplarPostのビュー数を表示するタイトルを作る
function my_posts_columns($columns) {
    $columns['pv_num'] = "ビュー";
    return $columns;
}
//各記事のビュー数の追加する
function add_my_posts_column($column_name, $post_id) {
    if( $column_name == 'pv_num' ) {
        echo wpp_get_views($post_id, 'monthly', true);//←ここの値で集計期間変更dailyとかweekly全部の場合はall
    }
}
if ( function_exists('wpp_get_views') ) {
    add_filter( 'manage_posts_columns', 'my_posts_columns' );
    add_action( 'manage_posts_custom_column', 'add_my_posts_column', 10, 2 );
}

投稿一覧に記事閲覧数を表示する方法の解説

投稿一覧の項目の追加・削除・並び替えは、「manage_posts_columns」というフィルターフックを使用して行います。
今回は一番後ろに追加すれば良いだけなので、「manage_posts_columns」フィルターフックの返り値である「$columns」に「”pv_num”、”ビュー”」を追加しました。
表示名称の変更は「ビュー数」や「PV数」など好みで変更してください。

また、並びを変更したい場合は「$columns」をごそっと変更しても構いません。
タイトルの次にビュー数を表示したい時などは以下のようにします。

 $columns = array(
    'cb'         => '<input type="checkbox" />',
    'title'      => 'タイトル',
    'pv_num'     => 'ビュー',
    'author'     => '作成者',
    'categories' => 'カテゴリー',
    'tags'       => 'タグ',
    'comments'   => '<div class="comment-grey-bubble" title="コメント"></div>',
    'date'       => '日時'
  );
  return $columns;

「manage_posts_custom_column」アクションフックで記事毎にPV数を表示させます。
wpp_get_views() は指定した投稿IDのPV数を取得する関数。

第1引数:投稿ID
第2引数:PV集計期間(daily, weekly, monthly, all から選べます)
第3引数:PV数をカンマで区切るかどうか

以上、「投稿一覧に記事閲覧数を表示する WordPress Poplar Post」のご紹介でした。

Google Adsense AMP自動広告の簡単な設定方法

Google Adsense AMP自動広告の簡単な設定方法

 

今回もGoogle Adsense 関連の話です。
前回は「Google Adsense 自動広告の簡単な設定方法」をご紹介しました。

このページをご覧になっておられる方は、すでにAMPやGoogle Adsense については一通りの知識を持っていると思いますが、AMP について少しだけご説明します。

 

AMP とは?

AMPは「Accelerated Mobile Pages」という、Googleが推進しているモバイルページを高速に表示させるための手法のことで、AMP を導入することでスマートフォンに高速表示を行えます。
そのことからスマートフォンで Google 検索(yahooもGoogleエンジンを使っています)を行うと、AMP 対応したページの優先順位が上がります。
本Webサイトも AMP 対応しています。

AMP 対応で検索表示順位が上がることは良いのですが、デメリットもあります。
AMP は高速化を行うために独自仕様に沿ってコーディングを行う必要があります。
WordPressの場合はプラグインでかなりの部分を自動対応してくれるので助かります。

で、プラグインの自動処理で作られたAMP用HTMLファイル等は、既存のGoogle Adsense 広告が入らない仕組みになっています。
そのうち自動で入るようになるかも知れませんが、少なくとも現在では広告が入りません。

ノーマルページとAMP ページは個別に広告を入れる必要があります。
前回はノーマルページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介しました。
今回は AMP ページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介します。

ちなみに既に Google Adsense にWebサイト登録を行っていると思いますが、登録していないようなら登録しておいてください。

 

Google Adsense AMP 自動広告とは?

まず、Google Adsense 自動広告とは、スクリプトと広告用のクライアントコードの2つを設置するだけで、後はGoogle にお任せで見ている方に合わせた広告が表示される仕組みの広告です。

自動広告機能がリリースされる以前は、プラグインを使うにしろ、自分でコードを設置するにしろ、面倒な手順を踏む必要がありました。
素人にはかなり難易度の高く、煩雑な作業でした。

自動広告ができるようになって、非常に楽にGoogle Adsense が利用できるので、気楽に試すことが出来るようになっています。

AMP 自動広告はAMP 用の自動広告を表示するためのものです。
AMP 対応ページには、AMP 自動広告を設定することで見ている方に合わせた広告が表示されるようになります。

 

AMP 自動広告の簡単な設定方法

簡単と書きましたが、子テーマは使います。
子テーマの設定は WordPress の基本ですので、是非ともこの際に利用してみてください。

ちなみに、私も以前子テーマの設定方法をご紹介しているので参考にしてくだい。
WordPress TwentySeventeenの子テーマの作り方
WordPress TwentyEleven の 子テーマ の作り方

 

自動広告の簡単な設定方法は、functions.php に下のコードを貼り付けるだけです。

//headにamp-auto-ads-JSを挿入する
add_action( 'amp_post_template_head', 'my_amp_add_tag_adsense_js' );
function my_amp_add_tag_adsense_js() {
?>
<!-- amp-auto-ads-JS -->
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<?php
}
//フッターにAMP自動広告コードを挿入する
add_action( 'amp_post_template_footer', 'my_amp_add_tag_adsense' );
function my_amp_add_tag_adsense() {
?>
<!-- AMP自動広告 -->
    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
    </amp-auto-ads>
<?php
}

 

AMP 自動広告の簡単な設定の解説

//headにamp-auto-ads-JSを挿入する
add_action( ‘amp_post_template_head’, ‘my_amp_add_tag_adsense_js’ );
WordPress の AMP head 部の処理イベント時(’amp_post_template_head)に、my_amp_add_tag_adsense_js と言う関数の実行を設定
「このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」とありますので head 部に挿入します。

function my_amp_add_tag_adsense_js () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense_js関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

//フッターにAMP自動広告コードを挿入する
add_action( ‘amp_post_template_footer’, ‘my_amp_add_tag_adsense’ );
WordPress の AMP footer 部の処理イベント時(’amp_post_template_footer)に、my_amp_add_tag_adsenseと言う関数の実行を設定
「この広告コードをコピーして、AMP HTML の本文に貼り付けます」とありますので footer 部の後ろに挿入しました。
本文内ならどこでも良いのですが、footer 部の後ろに挿入が簡単なのでそうしました。

function my_amp_add_tag_adsense () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

Google Adsense からコードを取得する

amp-auto-ads-JSコードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順2]をクリックします。
コードが表示されますのでコードをコピーします。
Google Adsense AMP 自動広告 手順2
AMP自動広告コードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順3]をクリックします。
コードが表示されますのでコードをコピーします
Google Adsense AMP 自動広告 手順3

最後に

手順 1: テキスト広告とディスプレイ広告のフォーマットをオンにします
通常、AMP 自動広告をオンにして、スクリプトとコードを追加してから 20 分後に広告が表示されます

Google Adsense AMP 自動広告 手順1

AMP の設定と Google Adsense 自動広告の簡単な設定方法が設置できていれば、数分で完了する作業です。
広告の表示はすぐには確認できませんが、AMP テストで正しくコードが挿入されているかをソース表示で確認できます。

ちなみに広告表示する価値もないページは表示されないと聞いたこともあります。。。

以上、「Google Adsense AMP自動広告の簡単な設定方法」のご紹介でした。

Google Adsense 自動広告の簡単な設定方法

Google Adsense 自動広告の簡単な設定方法

今回はGoogle Adsense 関連の話です。
自分のブログを持っているのなら、そして多少なりとも訪問者が来てくれるのなら、お小遣い稼ぎにGoogle Adsense をやってみたいですね?

ちなみにGoogle Adsense は事前にWebサイト登録を行っておく必要があります。
ちゃんとしたブログを持っていれば、Webサイトの登録は難しくないと思います。
Webサイトの登録申請を行うと Google による審査が行われます。ちゃんとWebサイトを運営していれば怖がることはないです。
Google Adsense への登録はひとまず済んだことにして次に進みます。

Google Adsense 自動広告とは?

Google Adsense 自動広告とは、スクリプトと広告用のクライアントコードの2つを設置するだけで、後はGoogle にお任せで広告が表示される仕組みの広告です。

自動広告機能がリリースされる以前は、プラグインを使うにしろ、自分でコードを設置するにしろ、面倒な手順を踏む必要がありました。
素人にはかなり難易度の高く、煩雑な作業でした。

自動広告ができるようになって、非常に楽にGoogle Adsense が利用できるので、気楽に試すことが出来るようになっています。

自動広告の簡単な設定方法

簡単と書きましたが、子テーマは使っていますか?
子テーマの設定は WordPress の基本ですので、是非ともこの際に利用してみてください。

ちなみに、私も以前子テーマの設定方法をご紹介しているので参考にしてくだい。
WordPress TwentySeventeenの子テーマの作り方
WordPress TwentyEleven の 子テーマ の作り方

自動広告の簡単な設定方法は、functions.php に下のコードを貼り付けるだけです。

//Google Adsense 自動広告設定
add_action('wp_head', 'my_auto_adsense');
function my_auto_adsense() {
?>
<!-- サイトに自動広告を設定 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: "ca-pub-xxxxxxxxxxxxxxxx",
        enable_page_level_ads: true
    });
</script>
<?php }

自動広告の簡単な設定の解説

add_action(‘wp_head’, ‘my_auto_adsense’);
WordPress の head 部の処理イベント時(wp_head)に、my_auto_adsense と言う関数の実行を設定しています。

function my_auto_adsense() {
?>
<script
・・・・
</script>
<?php }

my_auto_adsense関数の設定しています。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

Google Adsense からコードを取得する

Google Adsense を開き、[コンテンツ]>[自動広告]>[自動広告]>[自動広告を設定]をクリックします。

Google Adsense 自動広告のコード取得

Google Adsense 自動広告のコード取得

「サイトに自動広告を設定」画面が開きますのでコードをコピーします。

Google Adsense 自動広告のコード

Google Adsense 自動広告のコード

最後に

子テーマを作る作業は少し分かりづらいかもしれません。
しかし子テーマはテーマのメンテナンスに欠かせない機能なので是非とも設定しておきましょう。

Google Adsense への登録も最近は厳しいと聞くこともありますが、ちゃんとしたWebサイトを運営していれば大丈夫です。
もし審査に通らなければ、コンテンツ内容が規約違反に当たっていないか確認し、良質なコンテンツを多く書き再チャレンジしましょう。

Google Adsense の自動広告は決して難しいものではありません。
お小遣いを稼ぎましょう。

以上、「Google Adsense 自動広告の簡単な設定方法」のご紹介でした。

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 対応にする軽量プラグインです。
※2018-05-11追記
Search Console Accelerated Mobile Pages に『ページにユーザー作成の JavaScript がある(重大な問題)ページからカスタム JavaScript のコードをすべて削除してください。AMP ページにカスタム JavaScript があると、Google 検索結果に AMP 固有の表示機能が表示されないことがあります。 詳細』と以下のような通達が来ました。

重大な問題のある AMP ページ

重大な問題のある AMP ページ


Really Simple SSL は設定によってJavaScriptを出力します。他のサイトでも Really Simple SSL を使用しているのですがこの警告?通達?通告?は出ていないので Really Simple SSL が悪さをしているとは限りませんが、他のプラグインでJavaScript を出力するものは無いので。。。
そのうち改修されるかも知れませんが、私は Really Simple SSL を使うのを止めました。
※2018-05-11追記終了

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

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

もしくは、

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [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 トラッキング コードの設定方法でした。

WordPress TwentySeventeenの子テーマの作り方

WordPress Twenty Seventeen の子テーマの作り方


今回は、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ですので学習してカスタマイズしてください。

WordPress TwentyEleven の 子テーマ の作り方

WordPress TwentyEleven の 子テーマ の作り方


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

子テーマ の有用性

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

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

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

子テーマ設置方法

子テーマ設置場所

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

今回は、「twentyeleven-child」という名前のディレクトリを「wp-content/themes」ディレクトリの中に作ります。
twentyeleven-childディレクトリ作成
wp-content>themes>twentyeleven-child

作り方は、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を作ろう!」さん、本当にありがとうございます。