WordPressはオープンソースのブログプラットフォーム。
世界的に人気があるのだが、知っているのはWEB関連の情報に詳しい人で、一般的にはそれほど知られていないと思われる。
ブログを始める時に思い付くのは、アメブロ、JUGEM、FC2、Bloggerなどの無料ブログサービスで、いずれもビギナーにも優しい作りになっており、大抵はアカウントを作成するだけで使用できる。
その点、WordPressは一筋縄ではいかない。

WordPressそのものはオープンソースのプログラムなので、WordPressのシステム要件を満たしたサーバであれば、インストールすることで使用できる。
WordPress4.1.1日本語版の動作環境は、PHP バージョン 5.2.4 以上、MySQL バージョン 5.0 以上になっている。
が、この時点でビギナーには相当きつい。
条件がきついわけではなく、何が書いてあるのか分からないし、どうすれば良いのかも分からない。フリーソフトと同じで、便利で豊富な機能が無償で提供されていても、その機能を使いこなせるか否かはユーザー次第になる。

ただ、WordPressは奥が深いだけで、ちょっと頑張ればビギナーでも十分に利用できるし、一般的なブログサイトを使用するより、確実にWebコンテンツのスキルは向上するので、チャレンジする価値は十分にあると思う。

まずはサーバの用意から

WordPressを始める！と決意したら、次のアクションはサーバの確保。
有料・無料と世の中には多くのレンタルサーバが存在するが、WordPressがどういったものなのか勉強するなら、初めから有料のサーバを契約し、背水の陣で臨むのも一計だが、ここは無難に無料サーバがオススメ。

WordPressに対応している無料サーバもググれば結構あるが、人気なのはxdomain。
WordPress専用のレンタルサーバを運営しているXSERVERが展開しているサービスで、ドメインを取得しなくても無料でサーバを利用することができる。

 

無料の場合、サーバの容量は1GBで、広告の表示があり、その他にも有料のXserverと比較するといろいろと制限がある。
詳細はこちらのページを参照

制限があるとは言え、これだけの容量があれば十分。しかもWordPressの自動インストール機能付き。

申し込みは左サイドバーにある上図赤枠部分から行う。
「初めてのご利用」→「メールアドレス入力」→「確認メール送信」→「受信したメールに記載のお申込URLをクリック」→「必要事項を入力」という流れで、最後に「ログイン」。

ここで設定したメールアドレスとパスワードは、xdomainの管理パネルへログインするためのものなので必ず控えておく。

管理パネルに移行するので、左サイドバーの「無料レンタルサーバー」をクリック。

任意のサーバーIDを登録したら、再び左サイドバーの「無料レンタルサーバー」をクリック。

WordPressの「利用を開始する」をクリックし、左サイドバーの「無料レンタルサーバー」をクリックすると、WordPressの箇所に「管理パネルログイン」と表示されるので、クリックしてログイン。

WordPressの管理画面に入っているが、まだWordPressはセットアップされていないので、「新規インストール」をクリック。

サイトアドレスの空欄はサブドメイン用なので新規インストール時は空白にし、後はWordPressIDとブログタイトル、メールアドレスを入力して「次へ進む」。

確認画面で内容を確認したら「確定（WordPressをインストール）をクリック。

これでWordPressのセットアップが完了。
表示されているURL・管理ユーザー・パスワードはWordPressの管理画面にログインするための情報なので必ず控えておく。
セットアップそのものは非常に簡単。データベースの設定がなく、入力箇所も必要最小限になっているので、ビギナーも安心。

WordPressのセットアップが完了したら、次にFTPアカウントの設定を行う。
xdomainの管理パネルから「無料レンタルサーバ」→「WordPress　管理パネルログイン」でWordPressの管理パネルを開き、上図赤枠部分の「設定」をクリック。

各種管理設定の「FTPアカウント設定」をクリック。

「全てのファイル・フォルダにアクセスする」にチェックを入れて「設定変更」をクリックし、「設定編集（確定）」を更にクリックすると、FTPアカウントの情報が表示され設定完了。
表示されたパスワードは後から確認することができないので必ずメモをとっておく。

次はコンテンツ作成の準備

サーバの設定とWordPressのインストールが終了したので、これで第一段階の準備完了。
他のブログサービスでいうなら、アカウントを取得した状態と同じ。これから白紙のブログをカスタマイズしていく。

取得したブログURLをクリックすると、上図のようなページが表示されるので、左サイドバーの「メタ情報」にある「ログイン」をクリック。
ちなみにこれがいま公開されている自分のブログ。

WordPressの管理画面へログインするため、取得した「管理ユーザー名」と「パスワード」を入力。

WordPressの管理画面に到着。ここまで来たら、もう一息。
「更新」の項目に数字が表示されている場合は更新を選択。

更新には「WordPress」「プラグイン」「テーマ」の3通りあるが、取り敢えず更新するのはWordPressだけでOK。
「WordPressの新しいバージョンがあります。」と表示されている箇所の「いますぐ更新」をクリックする。
更新は自動で行われ、完了すると「WordPress◯◯へようこそ」のような画面が表示されるので、左サイドバーの「外観」をクリック。

テーマを決める

WordPressには多くのテーマが用意されている。
WordPressオリジナルのものから個人、企業が作成したものまで、様々なデザインが提供されており、WordPressの管理画面から追加できるものは全て無料。
アフィリエイトに特化したテーマなど一般サイトで販売されているものもあり、「WordPress　テーマ」で検索すればいろいろ出てくる。

「外観」をクリックすると、上図のようにすでにインストール済みのテーマが表示される。
現在のテーマは「有効」になっているもので、上図ではWordPressオリジナルのTwentyFifteen（2015） が選択されている。

Twenty Fourteen（2014）、TwentyThirteen（2013）もインストールされており、各テーマをクリックするとテーマの特徴が表示される。

ここで「気に入ったのがねぇ！」という場合は、「新しいテーマを追加」をクリック。

山ほどテーマが出てくるが、多すぎて選ぶのが大変なので、「特徴フィルター」をクリック。
希望の条件にチェックを入れて検索すれば、少しは対象が絞られる。
テーマのデザインは「ライブビュー」で実際のイメージを確認できる。
気に入ったテーマが見つかったら「インストール」をクリック。

インストールが終了したら上図の画面になるのでテーマを「有効化」すればOK。

各テーマのデザインは画像の差し替えなど、ある程度のカスタマイズは簡単に行えるが、余白やフォントの変更をはじめ、デザインそのものの設定を変更したい場合は、情報量が圧倒的に多いWordPressオリジナルのテーマを選択したほうが賢明。
ちなみに当サイトはTwenty Eleven を使用している。

カスタマイズする

テーマが決まったら次は基本デザインを設定。
左サイドバーの「外観」→「カスタマイズ」を選択。

WordPressオリジナルテーマで、CSSをいじらずに設定できるのは、このカスタマイズの項目のみで、表示される項目は各テーマによって異なってくる。
編集できる項目は限定されるが、各項目は何度でも自由に編集可能で、変更した後に「保存」をクリックすると、右側に表示されているページに反映されるので、確認しながら作業を行える。

余白が広すぎるとか、フォントが大きすぎるとか、ヘッダー画像の幅が気に入らないとか、検索窓が鬱陶しいとか、細かなデザインを変更したければ、CSSの編集が必要になってくる。

画像の追加と編集

サイトのイメージに大きな影響を与えるのがヘッダー画像。
画像が無しもシンプルで良いのだが、この部分を変更するとオリジナル感と達成感が得られるので、取り敢えず変更する。
「外観」→「カスタマイズ」から「ヘッダー画像」をクリック。

ヘッダー画像には推奨サイズは表示されおり、設定する画像を「リサイズ」か「トリミング」することになる。
百聞は一見にしかずなので、取り敢えず「新規画像を追加」をクリック。

メディアライブラリが開いたら、「ファイルを選択」をクリックしてヘッダーに表示したい任意の画像を選択するか、その画像をドラッグ・アンド・ドロップする。

画像をメディアライブラリの上にドラッグすると、上図のような表示に変わるので、そのままドロップすると、ファイルがアップロードされる。

ファイルの情報はメディアライブラリの右の「添付ファイルの詳細」に表示される。
この画像のサイズは3648*2736ピクセルで推奨サイズよりはるかに大きいため、「選択して切り抜く」という選択肢しか表示されていない。

「選択して切り抜く」をクリックすると、上図のような画像編集画面になる。
初期設定で表示されている選択部分が推奨サイズの比率になっており、サンプル画像と同じ縦横サイズになる。
選択範囲は自由に変更可能だが、横幅を基本にリサイズされるため、横幅は推奨サイズを下回らないようにしたほうが良い。
推奨サイズより小さな画像の場合、リサイズされて拡大されるので画像が荒くなってしまう。

推奨サイズより縦を長くして切り抜くと、切り抜いた画像がリサイズされてヘッダー画像に設定される。

ヘッダー画像だけではなく、アップした画像はリサイズ・トリミング・回転・ミラーと、簡単な編集が行える。
操作は上図赤枠部分のアイコンをクリックして行うが、トリミングは初めに切り抜きたい部分を画像上でドラッグすると、上図のように範囲選択できるので、トリミングする位置が決まった時点で、左端のトリミングアイコンをクリックして「保存」。
画像サイズを変更する場合は、「画像縮尺の変更」の箇所で任意の変更後の数値を入力して「縮尺変更」をクリック。リサイズは変更した時点で保存されるので、トリミングのように「保存」する必要はない。

固定フロントページ

固定フロントページは、トップに表示されるページもしくは投稿を指定する項目。
※固定ページと投稿ページについては後述。

デフォルトでは「最新の投稿」が設定されており、トップページにアクセスするとブログの最新記事が表示されるが、上図のように「固定ページ」のラジオボタンにチェックを入れ、任意のフロントページ（固定パージ）、もしくは投稿ページを指定することで、サイトのトップページを特定のページに固定することができる。

ウィジェット

ウィジェトは単独で動作するプログラムで、ブログで一般的なのは「カレンダー」「時計」「RSS」「最近のコメント」など。
これらは固定ページや投稿ページに表示されるわけではなく、サイドバーやフッダーに配置して使用する。

ウィジェトの追加・削除は「カスタマイズ」のメニューよりも、サイドバーの「外観」→「ウィジェト」で設定ページを開いたほうが分かりやすい。
使用するテーマによってサイドバーがあったりなかったりするが、フッダーは基本的にすべて存在する。

ウィジェトも後から変更可能なので、よく分からなければ適当でOK。

プラグインの有効化とインストール

WordPressには数多くのプラグイン（機能拡張）が公開されており、プログラミングの知識がなくても、プラグインをインストールして有効化するだけで様々なことが可能になる。

左サイドバーの「プラグイン」をクリックすると、デフォルトでインストールされているプラグインが表示されるので、「Akismet」と「WP Multibyte Patch」を有効化する。

Akismetは有効化するだけでなく、アカウントを有効化しなくてはならないので、「Akismetアカウントを有効化」→「APIキーを取得」→「GET AN AKISMET API KEY」をクリックすると、上図のページにくる。
Basicは無料で非商業用のサイトのみ利用可。問題なければ「SIGN UP」をクリック。

クレジットカードの登録画面が表示されるが、これは初期設定が36ドル/年の有料プランになっているため。
スマイルフェイスのスライドバーを左端に動かして無料プランに変更。

クレジットカードの入力画面が、氏名のみの入力フォームに切り替わるので、入力して「CONTINUE」をクリック。

表示されたAPIキーを「手動でAPIキーを入力」のテキストボックスに入力し、「このキーを使用」をクリックするとAkismetが有効になる。

この他のプラグインについては、自身のサイトに必要と思われるものを随時インストールしていけば良いのだが、取り敢えずコンテンツの作成を強化するプラグインを3つインストールする。

新しいプラグインは左サイドバーの「プラグイン」→「新規追加」で、上図赤枠部分に下記のタイトルを入力して検索。

TinyMCE Advanced
ビジュアルエディタを強化するプラグイン。
HTMLのタグを直接入力する玄人は別として、普通はWYSIWYG（ウィジウィグ）形式を利用すると思うので、インストールしておくと便利。

TinyMCE Clear
回り込みを解除する「clear:both」というタグを追加するボタンがビジュアルエディタに追加されるプラグイン。
すでの5年前のプラグインで最新バージョンのWordPressではテストされていないが、WordPress4.2 でも問題なく動作する。

Shortcodes Ultimate
ショートコードによってサイトの表現力を強化するプラグイン。
オリジナルのボタン作成などが可能になる。

コンテンツの作成

大まかな箱ができたら、次は中身の作成。

WordPressに限らず、多くのブログサービスに「記事」と「ページ」がある。
何が違うのかと言うと、一般的には「記事が動的」「ページが静的」と言われているが、動的とか静的とか言われても分からない。

WordPressのページは「固定ページ」と表記されているが、この固定ページにはカテゴリーなどの関連付けができず、独立したページになる。
一方の記事はWordPressで「投稿」と表記されており、こちらはカテゴリーやタグ付けなどが行え、普通のブログの記事と同じ。

「投稿」がブログなら、「固定ページ」はウエブサイトのようなもので、両者の性質は大きく異なっており、システムでの取り扱いも違ってくるのだが、見た目には全くわからないので、単純に「ブログっぽくしたいなら投稿」、「ウエブサイトっぽく作るなら固定ページ」で良いと思う。

SEOについて

検索での上位表示を意識するなら、Googleでガイドラインが公表されているので、まずガイドラインに沿って作成することが先決。

ウエブマスター向けガイドライン
検索エンジン最適化スターターガイド

・検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
・ユーザーをだますようなことをしない。
・検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
・どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

要約すると、妙な小細工をせず、質の高い、ユーザーが分かりやすいページを作れ、ってこと。

記事の新規作成

「投稿」または「固定ページ」を作成するには、左サイドバーの「投稿」または「固定ページ」をクリックするか、マウスオーバーで出現するサブメニューの「新規追加」を選択。

タイトルと本文を記入して、右サイドバーにある「公開」のメニューで「下書き保存」もしくは「公開」をクリック。
投稿をカテゴリー分類するには、右サイドバーの「カテゴリー」のメニューから「新規カテゴリーを追加」をクリックし、任意のカテゴリー名を入力後に「新規カテゴリーを追加」をクリック。
タグについても同様の操作で編集できる。

カテゴリーやタグは「投稿」メニューから事前に登録可能。
「スラッグ」は説明書きがある通り、URLに表示されるもので、デフォルトではタイトルがそのままスタッグに割り当てられる。
日本語のタイトルだと、そのまま日本語になってしまうため、Googleのガイドラインに沿って「コンテンツに関連した分かりやすい単語」を「半角英数」で登録する。

投稿や固定ページは初期設定でコメントやトラックバックが許可になっており、これらを許可しない場合は、上部にある「表示オプション」をクリックし、「ディスカッション」にチェックを入れると、コメントとトラックバックのチェックボックスが表示されるので、このチェックを外しておく。
ディスカッションの他にも、右サイドバーとフッターのウィジェトの表示・非表示は、この表示オプションで設定する。
また、表示しているウィジェットはドラッグすることで場所の移動が可能。

メニューを作成

サイトの構成や投稿のカテゴリーなどが決まったら、ユーザビリティを向上させるためにメニューを作成する。

「外観」→「メニュー」で設定画面を開く。
メニューには「ページ」のほか「カテゴリー」と「カスタムリンク」があり、任意で「メニューに追加」する。初めて設定する場合は、メニューの名前を入力して「メニューを作成」。
メニューはネスト（入れ子）に対応しているので、大分類→中分類→小分類と表示させることもできる。
メニューは複数作成することができるので、ヘッダー部分用とサイドバー用など、表示させる箇所によってメニューを切り替えることができる。

これで必要最小限+ の設定が完了。
後は左サイドバーの「設定」で「投稿設定」や「表示設定」などを編集すれば、結構な見栄えのするページになっていたりする。
CSSやPHPの知識がなく、取り敢えずWordPressを始めよう！というなら、このあたりから手を付けるのがベター。

ただ、文字の大きさや装飾、マージンなど細かな設定をしたい場合は、CSSやPHPを編集すれば可能で、オリジナリティも向上する。
最初はコードのコピペだけでもなんとかなり、編集しているうちにコードも見慣れてくるので、CSS初心者には最適な教材なのかもしれない。

---

世界的に人気のCMS　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のようなサイトはすこぶる便利。

プラグイン

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

新着情報の表示

What’s New Generator

国産のプラグインで新着の投稿・固定ページのタイトルを設定した数だけ表示。

プラグインをインストール、有効化したら、「設定」→「What’s New Generator」を選択し、タイトルや色などを任意で設定して「変更を保存」をクリック。

上図のように新着情報を表示させたい箇所に ［showwhatsnew］ というショートコードを記述するだけでOK。
ちなみにショートコードの記述はビジュアルエディタでも可。

パンくずリストの表示

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先生に尋ねるのが手っ取り早い。

---

世界的に人気のCMS　WORDPRESS