テーマの選択

テーマの選択

WordPress は「テーマ」を切り替えることで見た目などサイトから受ける印象を簡単に変えることができます。
サイトの情報に沿ったテーマに変えることで、より一層サイトの情報が伝わりやすくなります。
逆にサイトの情報とテーマがあまりにも違うと、ユーザーは混乱するかもしれません。
適切なテーマを選ぶとことで親しみ深いサイトにすることができます。
『WordPress テーマとは』
『WordPressのテーマを決める』

テーマの選択と変更方法

ダッシュボードメニューの「外観」⇒「テーマ」をクリックして表示します。
テーマ画面が開くとデフォルトのテーマが選択されています。
その他にもいくつか既にインストールされているかもしれません。

お気に入りのテーマを探す

そのままデフォルトのテーマでも良いですが、自分のサイトにマッチしたテーマを選びたい場合は、以下のボタンをクリックして「テーマ追加画面」を開きます。

WordPress テーマ追加画面表示ボタン

WordPress テーマ追加画面表示ボタン


注目、最新、人気などのテーマリストの中から選ぶことができます。
既に勧められたテーマがある場合は、テーマ検索で探すことも可能です。

お気に入りのテーマをクリックしてインストールすれば、テーマ画面に表示され自分のサイトのテーマに選択できるようになります。

自分のサイトのテーマに選択

テーマ画面でテーマに

ブログ情報と設定の変更

ユーザー情報の変更をする

WordPress のインストールをしたらまずやることに、サイトの全体設定を行う「設定」の変更があります。
基本的には何もしなくても動きますが、設定しておいた方が良い情報もありますので、確認しておきましょう。

設定は、現在のバージョン(4.8.2)では6つのメニューに分かれています。
・一般(一般設定画面)
・投稿設定(投稿設定画面)
・表示設定(表示設定画面)
・ディスカッション(ディスカッション設定画面)
・メディア(メディア設定画面)
・パーマリンク設定(パーマリンク設定画面)

一般設定

ダッシュボードメニューの「設定」⇒「一般」をクリックして表示します。
一般設定項目では、WordPressのインストール時に設定した情報がすでに入っています。

ここで変更をしないといけない項目は、「キャッチフレーズ」です。
デフォルトでは「Just another WordPress site」となっています。
自分のサイトに合わせたキャッチフレーズに変更しましょう。

SEO を積極的に取り入れてるサイトでは、キャッチフレーズを空白にしているところもあります。
キャッチフレーズにはh2タグが使われるケースがあるため、SEO的に不利になるというのがその理由のようです。
個人的には、SEOで不利になるかもしれないですが、どのんなサイトか一目でわかるようにするためのキャッチフレーズを空白にすることは反対です。この辺りは個人の主観によるものなので、各人で考えてください。

その他の設定は基本的にデフォルトのままでも問題ありません。

投稿設定

ダッシュボードメニューの「設定」⇒「投稿設定」をクリックして表示します。
特に行うことはありませんが。。。

「整形」項目については、チェックを外した方が良いとされています。
詳しくはわかりませんが、プラグイン等の影響によって不具合が生じる可能性もあるそうです。

「投稿用カテゴリーの初期設定」はカテゴリーを作ってからでないとできません。。。
カテゴリーをいくつか登録して、デフォルトにしたカテゴリができたら、ここで設定してください。

メールによる投稿が行いたい場合、ここで設定します。
が、今はメールよりもスマホのWordPress対応アプリがありますので、そちらを利用した方が良いかと。
WordPress for Android アプリ
WordPress for iOS
メール投稿はそのうち削除されるそうです。

「更新情報サービス」は、記事を投稿したとき、登録したURLに自動で登録や更新が通知されます。
ping送信と呼ばれる更新通知サービスです。
ping送信を行うサーバーは、検索エンジン、ランキングサイト、ブログサービスなど様々で、Googleなどの検索エンジンにインデックスされるのが早くなると言われています。
が、「Google Search Console」等を使ってしっかり管理した方がより効果的と思われます。
Googleが自然巡回してくれるまでFatch as Googleしましょう

表示設定

ダッシュボードメニューの「設定」⇒「表示設定」をクリックして表示します。
ここでも特に何かをする必要はないのです。

「フロントページの表示」で、サイトのトップページを特定の固定ページにすることができます。
サイトを構築して行く上で固定ページをサイトのトップページにしたくなったら、設定しましょう。

ディスカッション設定

ダッシュボードメニューの「設定」⇒「ディスカッション」をクリックして表示します。
ここでも特に何かをする必要はないのです。
デフォルトのままで十分です。

ただ、コメントやトラックバックはスパムの温床になりますので、先に紹介した「Akismet Anti-Spam (アンチスパム)のインストール」などのスパム対策を必ずしてください。

メディア設定

ダッシュボードメニューの「設定」⇒「メディア」をクリックして表示します。
ここでも特に何かをする必要はないのです。
WordPressは記事などに写真などを貼る場合に、メディア(写真)を追加してから張り付けるのですが、その際に「サムネイル」「中サイズ」「大サイズ」など幾つかのサイズで写真を保存します。
自分のサイトの中で使用したいサイズが固まってきたら、ここでサイズを指定します。

パーマリンク設定

ダッシュボードメニューの「設定」⇒「パーマリンク設定」をクリックして表示します。
ここではSEOを気にする人は変更をする必要があります。

インストール直後のデフォルト状態の WordPress では、その記事のURLは、” http://example.com/?p=123 ” のように数字と記号の組み合わせで表示されます。
この URL のうち、末尾の「 ?p=123 」の部分がパーマリンクです。

GoogleではサイトのURLを、「サイトのURL構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合はIDではなく意味のある単語を使用して)URLを構成できるよう、コンテンツを分類します。」とアナウンスされています。
SEO的にはこれを満たす方が有利と思われています。

そこで、先ほどのパーマリンクです。
P=123ではなく、記事の名前で指定した方が、上の条件を満たしそうですから。
というわけで、ここでは

「カスタム構造」を選択して
サイトのURL/%postname%
という風にすべきとされています。

カスタム構造の一番後ろの /%postname% だけを残してばっさり消してしまいましょう。

以上、WordPress のインストールをしたらまずやること、サイトの全体設定を行う「設定」の変更の紹介でした。

Akismet Anti-Spam (アンチスパム)のインストール

Akismet Anti-Spam (アンチスパム)

WordPress のWebサイトは常にスパム広告などを行う人々から狙われています。
そのため、WordPress をインストールしたら、まず自分のサイトをスパムから守る「Akismet」プラグインをインストールしましょう。

Akismet のインストール

以前に投降した記事を参照してください。
WordPressのWebサイトをスパムから守る「Akismet」プラグイン

Akismet でなくても、スパムからサイトを守れればどんなプラグインインでも方法でも構いません。
でも、Akismet をサクッと入れてしまうのが良いと思います。

以上、WordPress のインストールをしたらまずやることに、Akismet プラグインのインストールをしましょうでした。

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

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

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

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

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

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

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

WordPressの現在のバージョン

WordPressの現在のバージョン

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

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

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

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

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

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の学習を行いましょう。