WordPressをカスタマイズする前に

いまからWordPressを始めるビギナー向け

サイトのデザインをカスタマイズするため、ネットの情報を参考に見よう見まねでCSSやphpを編集してみたものの、手順や基本を全く無視して作業を進め、かなり痛い目をみる羽目になった。

カスタマイズの下準備

スタイルシートはともかく、phpの編集は1つ間違えると再起不能に陥ってしまうので、まず心の準備とFTPクライアントを用意する。

上図は管理パネルからphpファイルを編集して保存した直後の状態。
phpファイルが不正に編集されると、管理パネルを含めた全てのページが上図のように真っ白になり、エラーが発生した行数が表示される。
エラーが表示された時は、FTP接続のことが念頭になく、画面同様、頭が真っ白になった。

この状態に陥ると、管理パネルからの修正は不可能なので、FTPクライアントソフトを使用して直接WordPressのフォルダにアクセスし、エラーが発生しているファイルを修正する必要がある。

xdomainの無料レンタルサーバーを使用している場合、FTP設定を有効化していれば、「xdomainの管理パネル」→「WordPressの管理パネル」とログインし、「インストール済みWordPress一覧」の「設定」→「FTPアカウント設定」で、上図のようにアカウント名やホストを確認ができる。

ホスト・ユーザー・パスワードを入力して接続。

xdomainの場合は直接WordPressのフォルダが開く。

さくらインターネットの場合は、wwwフォルダ直下に作成したWordPressのフォルダがある。
ちなみに当サイトは　さくらインターネットのレンタルサーバを使用している。

接続したら「wp-content」→「theme」のフォルダを開いていく。

「theme」フォルダの中に現在インストールされているテーマのデータがあり、各フォルダ内にテーマのstyle.cssのほか、phpファイルが格納されている。

取り敢えず、style.cssや各phpファイルには、WordPressの管理パネルを使用しなくても、直接アクセス可能だと分かればOK。
いざというときは、この手順でWordPressのデータにアクセスする。

子テーマ

WordPressの公式フォーラムを始め、多くのサイトでCSSを編集する際には「子テーマ」を作成するよう推奨している。
その多くは子テーマを使用する理由に、「テーマが更新された際に変更部分が上書きされるため」となっている。テーマを更新するとスタイルシートも初期化されるらしい。

そもそも「子テーマ」とは、新たに作成するスタイルシートで、そこへ変更する箇所だけコードを記述する。
システムはスタイルシートからページのデザインを読み込むのだが、子テーマが存在していると、親テーマを読み込んだ後に子テーマを読み込むため、修正部分が上書きされる感じでデザインへ反映するという流れ。

ただ、CSS初心者としては新しくスタイルシートを作成するというだけで、小難しいようで抵抗があったので、「テーマを更新しなければ親テーマを直接編集してもOKのはず」と、勝手な解釈をして親テーマを直接編集していた。
ところが、順調だったもの束の間、コードをコピペしてから数値などを変更→保存→プレビューで確認→修正→確認→修正→確認。。。と、修正してもデザインが思うようにならないと、本来は変更しなくてもよいところまで修正したり、余分なコードを追加してみたり、いい加減な編集を繰り返すことになり、少しづつ微妙におかしくなっていく。

しかし、元に戻そうにも一度「保存」してしまうと「Ctrl + Z」は無効になり、親テーマを直接編集しているので原本は存在せず、修正しようとして更に傷口を広げることになった。
結局、収拾がつかなくなり、編集していたテーマを削除して、再インストールすることにした。

テーマの削除

使用しているテーマの削除は2通り。
管理パネルから「外観」→「テーマ」で、別のテーマを選択して「有効化」。

削除するテーマをクリックして詳細を画面を開くと、上図のように「削除」というボタンが出現する。

別の方法はFTPクライアントを使用してWordPressのフォルダにアクセスして、「wp-content」→「theme」を開く。

削除したいテーマのフォルダを削除する。

子テーマの作成

振り出しに戻ったので、同じ轍は踏むまいと子テーマを作ることにした。

WordPress Codex 子テーマの作り方

style.cssに記述するコードが長々と記載されているが、実際に必要なのは下の2行だけのようで、重要なのは「Template」でしっかりと親テーマを指定しないと、システムが子テーマとして認識してくれない。

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

テンプレート名を確認するには、FTPクライアントでサーバにアクセスし、「theme」フォルダ内にあるフォルダ名を見る。
また、子テーマのstyle.cssやfunction.phpファイルを白紙の状態から作成するのが微妙なら、親テーマのフォルダ内にあるstyle.cssとfunction.phpをデスクトップなどにダウンロードして、Otbeditやメモ帳で開いて編集して上書き保存すればOK。

themeフォルダ内に新規フォルダを作成し、推奨どおりフォルダ名を「テンプレート名-child」に変更して、フォルダにstyle.cssとfunction.phpをアップロード。

管理パネルに戻って「外観」→「テーマ」を開くと、作成した子テーマが認識されているはず。
「このテーマは壊れています」的な表示がある場合は、style.cssのコードが間違っている可能性が高いので再確認。

後は修正したいコードをそのまま子テーマのスタイルシートに記述すると、そのコードが反映されるはず、だった。
全く反映されていなければ設定ミスだと思うのだが、微妙に反映されていたり、されていなかったり。反映されていないコードの記述ミスかと思い、親テーマにコードをコピペすると、なんの問題もなく反映される。

いろいろと調べてみたが、結局は原因不明。
もっと時間を割いて原因を解明すれば、スタイルシートや子テーマの基礎知識が身に付くのだろうが、面倒なのでまたの機会に。

デフォルトテーマベースのカスタムテーマ

子テーマが使えないので、当初はバックアップで対応することを考えた。
原本としてインストールしたテーマをクリーンな状態でフォルダごとダウンロードして保存し、原本とは別に編集後のテーマもフォルダごとダウンロードしてバックアップすれば、オリジナルのテーマも参照できる。
ただ、誤ってテーマを更新した場合、テーマフォルダごと上書きして問題ないのかという懸念が残る。スタイルシートやphpファイルを変更した部分だけ再度編集するのが無難なのだが、この作業をもう一度するのかと思うとウンザリする。

そこで思いついたのが、テーマのフォルダ名を変更し、WordPressに違うテーマだと認識させる策。同じテーマを2つインストールすることはできないが、この方法ならTwenty Elevenの内容を持ったテーマを同時にインストールできる。

まずFTPクライアントソフトなどを使用してサーバへアクセスし、コピーしたいテーマをフォルダごとデスクトップ等へダウンロードする。

/*
Theme Name: Twenty Eleven
Theme URI: https://wordpress.org/themes/twentyeleven/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: 
----以下、省略-----
*/

ダウンロードしたフォルダ内のstyle.cssファイルを開き、冒頭部分（上図赤文字部分）の「Theme Name」を任意の名前に変更する。
ここのテーマ名は全角文字を使用しても認識してくれるが、半角英数の使用を推奨。
フォルダ名はスペース（空白）を含まない半角英数小文字を使用。

よりオリジナルっぽさを求めるなら、フォルダ内のscreenshotファイルを削除し、サイズが880×660 の画像を用意して「screenshot」という名称でフォルダに入れると、テーマ一覧でオリジナルの画像が表示される。
デフォルトの画像はPNGだがJPGでもOK。

編集が完了したらフォルダをZIPファイルに圧縮する。
圧縮は「フォルダ選択」→「右クリック」→「送る」→「ZIPフォルダー」。
WordPress管理パネルの「外観」→「テーマ」から、「新しいテーマの追加」をクリック。

続いて「テーマのアップロード」→「ファイルを選択」をクリックし、作成したZIPフォルダを指定して「いますぐインストール」をクリック。

インストールが完了したら「有効化」をクリック。

内容をコピーしたオリジナルテーマが完成。

デフォルトテーマとコピーテーマは共存しているので、「外観」→「テーマの編集」→「編集するテーマの選択」からいつでも切り替え可能。
管理パネルを同時に2つのタブで開くと、デフォルトテーマの値を見ながら、作成したテーマの編集ができるので意外と便利。

テキスト比較

編集の基本作業がコピペの場合、原本と編集後のコードを見比べることがしばしば起こる。
そのうちコードに慣れてくるのでマシにはなるが、初めは苦痛以外の何物でもない。

そこで役立つのが文章比較サイト　difff（ﾃﾞｭﾌﾌ）
真偽の程は定かで無いが、かのSTAP細胞の論文解析にも使用されたとか、されないとか。。

使い方は比較する文章を右と左にそれぞれコピペして「比較する」をクリックするだけで、異なっている部分がハイライトされて表示される。
インターフェイスがシンプルなので非常に使いやすい。
同様のフリーソフトも存在するが、WordPressをブラウザ上で編集していると、すぐにアクセスできるdifffのようなサイトはすこぶる便利。

プラグイン

ページのレイアウトやデザインを作成していると、出来そうで出来ないことが意外と多く、それを可能にするためのコードを公開しているサイトもあるが、コピペでのみで対応するのは無理がある。
目的がスキルアップであれば労を惜しまず自前でコードを編集して作成するべきだが、デザイン完成を優先させるなら、便利で手軽なプラグインを使わない手はない。

パンくずリストの表示

Breadcrumb NavXT

パンくずリストは（E.i.Z |Software > Webコンテンツ > カスタマイズの準備）と、こんな感じでページ上部に表示してあるもので、ユーザーが今どの階層にいるのか一目瞭然で分かるリスト。

プラグインをインストール、有効化したら、上図のような表示になるので「すぐに移行する」をクリック。
設定画面が開くが取り敢えずデフォルトのまま、管理パネルの「プラグイン」→「Breadcrumb NavXT」→「詳細を表示」→「インストール」に順に移動。

<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
 <?php if(function_exists('bcn_display'))
 {
 bcn_display();
 }?>
</div>

上記のコードをコピーしてパンくずリストを表示する任意の位置に記述する。

当サイトのようにメニューの下にパンくずリストを表示する場合は、「外観」→「テーマ編集」→「ヘッダー」を選択。

上図のように<!–#access–>と</header>の間に先ほどのコードを貼り付けるとメニューの下にパンくずリストが表示される。

.breadcrumbs{
 font-size: 10px;
 margin: 10px 50px;
}

表示されたパンくずリストはスタイルシートで装飾できるので、フォントサイズやマージン等を指定してできあがり。

TOPへ移動

jcwp scroll to top

このプラグインは今、右下に出現している「TOP MENU へ移動」というタブのようなボタンを表示するもので、クリックすると自動的にスクロールしてページトップへ移動する。

インストール後に有効化したら「設定」→「jcwp scroll to top」で設定が可能。
表示位置は右端・中央・左端の3箇所固定で、任意の位置に表示させることはできない。

「Animation Duration」はトップへ戻る速さで、「Show when scroll at」はボタンを表示させるタイミングを設定。「Easing type」は移動時のアニメーションがいろいろ用意されている。
その他はフォントやカラーの設定で、「Text to display」でボタンに表示するテキストを指定。

設定が完了したら「Save Changes」をクリックして終了。

固定ページや投稿に記事一覧を表示

List category posts

全ての投稿記事のやカテゴリーを指定して、タイトルの一覧を表示するプラグイン。
このページの下にある「関連記事」の表示に、List category postsを使用している。

「プラグイン」→「List category posts」→「詳細表示」の説明に使用例が記載されているが、ショートコードで表示する記事を指定する。

カテゴリーIDでの抽出
[ catlist id = カテゴリーID]

カテゴリー名での抽出
[ catlist name = "カテゴリー名またはスラッグ"]

表示数を指定
[ catlist name = "カテゴリー名" numberposts=表示数]

タイトルで並び替え（昇順）
[ catlist id=カテゴリーID orderby=title order=asc]

日付順（降順）
[ catlist name="カテゴリー名" orderby=date order=desc]

当サイトの使用例
［catlist name=“parts,remodeling“ numberposts=5 orderby=date order=desc]

上記のショートコードは、カテゴリースラッグが「parts」と「remodeling」に属する投稿で、表示数は5行、日付を降順で並び替え、という内容。

スラッグやタグ、カテゴリー名はダブルクオーテーションを使用する。
複数のスラッグやタグ、カテゴリー名を指定する場合はカンマ（,）で区切り、全体をダブルクオーテーションで囲む。
表示数の指定は単独で使用できず、カテゴリーIDやスラッグなどを指定する必要がある。
カテゴリーの指定や表示数、並び替えなどの各コード間は半角スペースを空ける。
並べ替えは昇順なら「asc」、降順なら「desc」。

ちなみに、カテゴリー名やスラッグが正しく認識されていないと、全ての投稿を対象として表示された。

カテゴリーIDは「管理パネル」→「投稿」→「カテゴリー」で任意のカテゴリーをクリックすると、ブラウザのアドレスバーに「ID= ◯◯」（上図赤線部分）と数値が入っており、これがカテゴリーIDになる。
スラッグは作成したカテゴリーに任意で作成するもので、自動生成されるものではない。

固定ページに投稿記事を表示

Posts in Page

投稿のカテゴリーはページが存在していない。
カテゴリーのリンクを作成することはできても、リンク先で表示されるのは記事が連なったもので、そこへカテゴリーの解説文や画像の挿入はノーマルな使用方法ではできない。
カテゴリーのphpファイルを作成たらできるようだが、またもや難解なコードが羅列しているので、できれば避けたい。
そこで発想を転換して固定ページに投稿を表示できないか、と思って調べたら、都合の良いプラグインを発見。

Posts in Page はショートコードで、あたかも固定ページに書かれているかのごとく、投稿記事が表示できてしまう。
コードは前述のList category postsに似た感じで、カテゴリーIDやスラッグなどが指定でき、表示数や並び替えも同様にできる。

カテゴリーIDでの抽出
[ ic_add_posts ids='◯◯']

カテゴリースラッグでの抽出
[ ic_add_posts category='カテゴリースラッグ']

表示数を指定
[ ic_add_posts showposts='表示数']

タイトルで並び替え（昇順）
[ ic_add_posts orderby='title' order='asc']

List category postsは投稿記事のタイトルの表示が可能だが、Post in Pageは本文を抜粋した状態で表示するプラグイン。
List category postsはカテゴリーを指定する際に、ダブルクオーテーションを使用したが、Post in Pageはシングルクォーテーションを使用。その他の条件設定はほぼ同じだが、pose in Pageは「カテゴリー名」は使えず、IDかスラッグでの指定になる。

抜粋表を全文表示に編集

投稿を抜粋ではなく全文表示させたい場合やメタ情報を非表示にするためにはphpファイルを編集する必要があるため、編集するphpファイル「posts_loop_template.php」をメインテーマのフォルダにコピーする。

FTPで接続したら「theme」フォルダと同じ階層に「plugin」フォルダがあるので、「plugin」→「post-in-page」を開き、上図赤枠部分の「posts_loop_template.php」を一旦、デスクトップ等へダウンロードし、「theme」フォルダ内の現在使用しているテーマフォルダにアップする。作業が完了したら「外観」→「テーマの編集」に「「posts_loop_template.php」が追加されているので、編集作業は全てこのファイルを使用。

記事を抜粋表示から全文表示にするには「posts_loop_template.php」を開き、次のコードを変更する。

 <!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_excerpt(); ?>
 </div>

上記赤文字部分を　<?php the_content(); ?>　に変更。

<!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_content(); ?>
 </div>

これでpost in page で抽出した投稿は全て全文表示になる。
※任意のページのみ全文もしくは抜粋というのは無理らしい。

投稿の下にあるメタ情報を消す場合は、同じ「posts_loop_template.php 」の下記部分を削除する。

 <!-- This is the output of the META information -->
 <div class="entry-utility">
 <?php if ( count( get_the_category() ) ) : ?>
 <span class="cat-links">
 <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
 </span>
 <span class="meta-sep">|</span>
 <?php endif; ?>
 <?php
 $tags_list = get_the_tag_list( '', ', ' );
 if ( $tags_list ):
 ?>
 <span class="tag-links">
 <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
 </span>
 <span class="meta-sep">|</span>
 <?php endif; ?>
 <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
 </div>

投稿を全文表示にしてメタ情報を削除すると次のようになる。

<!-- NOTE: If you need to make changes to this file, copy it to your current theme's main
 directory so your changes won't be overwritten when the plugin is upgraded. -->

<!-- Start of Post Wrap -->
<div class="post hentry ivycat-post">
 <!-- This is the output of the post TITLE -->
 <h6 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h6>

<!-- This is the output of the EXCERPT -->
<div class="entry-summary">
 <?php the_content(); ?>
 </div>

<!-- This is the output of the META information -->
 
</div>
<!-- // End of Post Wrap -->

上記の青文字部分はデフォルトで<h2>タグが使用されているのを変更している。

その他のウィジェット

All In One SEO Pack
SEOの基本となるメタタグの入力などを可能にするウィジェット。

SEOに関してはGoogleのパンダアップデートやペンギンアップデートなどで、アルゴリズムが大幅に変更されると、過去に効果的と言われてきた対策がデメリットになったり、全くノーマークだった箇所が重要になったりするので、自然と情報が錯乱してしまうが、まずはGoogleが公表しているポイントを押さえるべき。
ウエブマスター向けガイドライン
 検索エンジン最適化スターターガイド

Google XML Sitemaps
検索エンジンのクローラー用に特化したサイトマップ。

サイトマップはサイトの構成を記したもので、最近は少なくなったがサイトマップとしてフローチャートを掲載しているサイトもある。
ただ、このGoogle XML Sitemapsはサイトに表示するためのものではなく、Google、Bing、Yahoo、Askと主要な検索エンジンのクローラー専用で、「ドメイン名.sitemap.xml」というURLは存在するものの、「sitemap.xml」という静的ファイルはディレクトリ上に存在せず、動的に生成されるのが特徴。
そのため固定ページや投稿を追加してサイトマップが変更されると、自動的にサイトマップも更新されるという優れもの。

Favicon Rotator
ファビコンを表示させるためのプラグイン。

ファビコンとはブックマーク（お気に入り）に追加した際などに表示されるアイコン。

Favicon Rotatorは複数の画像を登録できるため、パソコンのブラウザ用だけでなく、スマホやタブレットでホーム画面に追加した時もアイコンが表示される。

「プラグイン」→「インストール済みプラグイン」→「favicon Rotator」→「設定」から、作成したアイコンを登録するだけ。

他にも様々なプラグインがあるので、コードの記述で行き詰まったり、コードを書くのが面倒だったり、使いたい機能がない場合などは、取り敢えずプラグインを調べるのがオススメ。
ほとんどのプラグインは英語表記だが、それほど難しいことは書かれておらず、ブラウザの拡張機能で翻訳するだけでも、ある程度の設定は可能。また、人気のプラグインは日本語訳して使い方を紹介しているサイトも多いので、分からなければGoogle先生に尋ねるのが手っ取り早い。

WordPressをカスタマイズする前に

カスタマイズの下準備

子テーマ

テーマの削除

子テーマの作成

デフォルトテーマベースのカスタムテーマ

テキスト比較

プラグイン

新着情報の表示

パンくずリストの表示

TOPへ移動

固定ページや投稿に記事一覧を表示

固定ページに投稿記事を表示

その他のウィジェット

関連記事

WordPressのテーマを「Twenty-Sixteen」へ変更

さくらインターネットから Xserver へ移転

xdomainでWordPressを始めよう！

WordPressをカスタマイズする前に