メモ
このドキュメントは2016年の初期サイトの時に作成したドキュメントです。
WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。
ある程度判っている方は応用編を参照してください。
現在のサイトはこの応用編の技術で作成されています。
WEBで情報発信する為にはWordPressの構築が必須で、当初はインストールして少し設定等を行えば簡単にできるのかな？と思っていました。
しかし実際にやり始めると思うような画面や機能にする為にはCSSやPHPを修正しなければダメだ！という事がわかり、ネットの情報を基に悪戦苦闘した結果このサイトが立ち上がりました。
ネットで色々な情報を提供して頂いた方々にこの場を借りて感謝させて頂きます。ありがとうございました。
私もWordPressは初めてですし当然HTML等でWEBサイトを作った経験も全然ありませんでした。
そこで私と同様にWordPressが初めての人向けに私のWPの構築経験の情報を発信しょう！と思い立ちました。
【目標】
WordPress、HTML、CSS及びPHPが初めての方向けに基本的な事が理解できるサイトにする。
【狙い】
上記目標を達成する為に『個々の技術的問題を解説する』のではなく『このサイトがどのように作られているのか？』の事例を紹介する。
これによりこのサイトをトレースして貰えれば、私が経験し理解した事をより簡単に理解する事ができると思っています。
【目的】
最後に何故私がこのような活動をやるか？の目的は下記になります。
1.今まではネットから情報を貰う立場でしたがその恩返しも含めて、情報を発信する側になりたい。
2.色々勉強をしている団塊の世代にネットを使って情報発信をするやり方を伝えたい。
※毎日、図書館に通ってこのサイトを作っていますが、図書館にノートを持ち込み、調べた結果を記録している人をチラホラ見かけます。それらの方々も活用してもらえるサイトにしたい！と思っています。
＜目次＞
１.WordPress及び関連ソフトのインストール
本章ではWordPressのインストールとCSSやphp等を修正するツールEmEditorについて解説しています。
色々な局面でテキストエディタが必要になりますのでWordPressのインストールの前にEmEditorをインストールしてください。
1-1.EmEditorのインストール
WordPressでWEBサイトを構築する場合どうしてもWordPressを構成するファイルを修正する必要があります。
これらのファイルの修正には『UTF-8のBOMなし』が要求されるためWindowsのメモ帳は利用できません。
そこで上記スペックに合うテキストエディタは色々試した結果、私はEmEditor Free版を使っています。
このWEBサイトはこのソフトを前提として記述されているのでプロの方以外はこれを利用する事をお勧めします。
インストールのやり方や各種設定は下記ドキュメントを参照してください。
1-2.WordPressのインストール
このWEBサイトはレンタルサーバを借りるのではなく自宅のSynology社のNAS上にWordPressをインストールしています。
既にレンタルサーバ等でWordPressを利用されている方は2章に進んで下さい。
上記はレンタルサーバを利用するのと同じやり方になります。
SynologyのWordPressパッケージをインストールする
上記はSynology社が用意したWordPressパッケージを利用する方法です。
推奨は色々な制限がない日本語WordPressを利用する方法です。
２.WordPressの基本設定について
このWEBサイトはWordPressのテーマとしてTwenty Twelveを利用しています。
本章ではこのテーマの選定理由からこのテーマを使う上での基本的な設定を解説しています。
2-1.WordPressテーマの選定
WordPressをインストールして始めにやることはテーマの選定です。
下記ドキュメントは『テーマ：Twenty Twelve』を選択した背景とインストール方法を解説しています。
2-2.Twenty Twelveの基本設定
テーマが決まったら次にやる事はこのWordPressの各種の機能をどの様に使うか？の設定になります。
下記ドキュメントは『ダッシュボードの設定』特にWebサイト公開前に気を付ける事を解説しています。
2-3.ブログの表示名の変更
WordPressはログインしたユーザ名が随所に表示されます。
しかしログインユーザ名はあまり表面に出したくないので、この修正を行います。
以上でWordPressで投稿を開始する前の基本的な設定が完了しました。次は具体的にドキュメントを作成するステップに入っていきます。
３.ドキュメント作成の基本環境を整える
本章では実際にドキュメントを作成しこのドキュメントの見栄えをCSSで修正し、このCSSに対応するビジュアルエディタのカスタマイズ方法を解説しています。
これによりビジュアルエディタでほぼhttp表示に対応できるドキュメント作成が可能となります。
3-1.投稿ドキュメントを作成してみよう
投稿のカテゴリを設定しドキュメントサンプルを書いてみましょう。
下記ドキュメントにはカテゴリの設定方法と、サンプルドキュメントの作成方法が解説されています。
3-2.CSSを編集してみよう
ドキュメントサンプルを書いて表示させるとTwenty Twelveテーマは、意外にあっさりしていてあまり見栄えが良くない事が判ります。
このドキュメントはTwenty Twelveの画面構成の解説から、CSSを修正する為の子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ方法を解説しています。
Twenty TwelveのCSSをカスタマイズする
3-3.ビジュアルエディタを使い易くしよう
ドキュメントの書き方にはHTMLで記述する方法とビジュアルエディタで記述する方法があります。
できれば総てのドキュメントをビジュアルエディタで書く事が理想です。
これを行うプラグインがTinyMCE Advancedです。
下記ドキュメントはTinyMCEの見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、表をビジュアルエディタ使う設定等TinyMCEを使いこなす為のテクニックを解説しています。
上記で設定した一般のテキストボックスにCSS、PHP及びHTMLソースを記述するとhttp画面からデータが正しく取得できない問題が発生します。
この対策として整形済みテキスト(preformatted text)機能を使ったソースコード専用のテキストボックスを作成する方法を下記で解説しています。
TinyMCE Advancedにhtmlソースを出力するBOXを作成する。
以上の作業が終わるとビジュアルエディタ画面とhttp画面が統一されて、本格的にドキュメントが作成できる基本環境ができあがります。
４.ドキュメント作成に利用した方が良いプラグイン
本章では3章で構築したドキュメント作成環境を更に使いやすくするためのプラグインの紹介をしています。
4-1.画像を簡単に取り込める様にしよう
見やすいドキュメントを作成する為には画像の挿入が必要ですがWordPressの基本機能では不足です。
これを解決してくれるのが『OnePerss Image Elevator』等のプラグインです。
本サイトは画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントはこの画像に関するツールと管理方法について解説しています。
OnePress Image Elevatorのインストールと画像管理
4-2.アイコン文字をドキュメントに利用しよう
アイコンも文字を使ったWEBサイトをよく目にしますが、WordPressのビジュアルエディタで使えるアイコン文字のプラグインが『WordPress Visual Icon Fonts』です。
このドキュメントには『WordPress Visual Icon Fonts』のインストール方法と簡単な使い方を紹介しています。
WordPress Visual Icon Fontsのインストールと使い方
以上でビジュアルエディタを使って画像やビジュアルアイコンも使ったドキュメント作成環境が整いました。
５.投稿画面をカスタマイズする
本章では１~４章で構築したドキュメント作成環境で作成したドキュメント表示する為の更に細かい変更方法を紹介しています。
5-1.メニューを編集する
まず始めにヘッダーを構成するメニューにカテゴリページ等を追加しましょう。
5-2.ヘッダーをカスタマイズする
ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。
ヘッダーはタイトル、タイトルの説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が解説されています。
Twenty Twelveのヘッダーのカスタマイズ事例
5-3.ぱんくずリストを追加する
ヘッダーの下にパンくずリストが使われているサイトを良く目にします。
これを表示するプラグインが『Breadcrumb NavXT』というプラグインです。
本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を解説しています。
5-4.投稿の本文をカスタマイズする
投稿ページにはメタ情報や、前の記事や次の記事等の情報が自動で出力されます。
このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの＜前の記事＞＜次の記事＞のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾する方法を解説しています。
Twenty Twelveの投稿ページのカスタマイズ方法
5-5.ウィジェットをカスタマイズする
Tｗenty Twelveのウィジット画面のディフォルト設定は、①サイト内検索、②最近の投稿、③最近のコメント、④アーカイブ、⑤カテゴリ、⑥メタ情報が表示されています。
このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。
Twenty Twelveのウィジェットをカスタマイズする
5-6.フッターをカスタマイズする
Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。
これを通常サイトの様に『Copyright表現』に変更した方がWEBサイトでは一般的です。
下記ドキュメントはこのフッタ情報の変更にfooter.phpを変更した事例を解説しています。
以上で投稿画面については総ての変更が完了しました。
6.カテゴリ表示を抜粋表示に変更する
ウィジェット画面で『カテゴリ』を選択すると対象ドキュメントが総て表示されます。
個々の対象ドキュメントに『続きを読む』のタグを入れておくとそこで表示が終わるので少しは見易くなりますが面倒です。
またこのサイトの様にブログ記事でない場合は『続きを読む』のタグを入れるのも文章的に難しいです。
6-1.投稿ページの 一覧表示を抜粋表示に変更する
Twenty twelveの投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。
その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。
このドキュメントは一覧表示は総て抜粋表示にする方法を解説しています。
Twenty twelve の投稿ページの一覧表示を抜粋表示に変更する。
７.固定ページをカスタマイズする
最後に本章ではWEBサイトの体裁を整える為の固定ページのカスタマイズ方法を解説しています。
7-1.フロントページを固定ページにしてカスタマイズする
フロントページとはURLでアクセスした時に始めに表示されるページです。
Twenty Twelveのフロントページのディフォルトは投稿の一覧表示ですが、このWebサイトの『サイトの紹介』様に固定ページをフロントページにする事ができます。
また固定ページは固定ページ特有のカスタマイズが必要になります。
このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し、更にフロントページのタイトルを非表示にする方法も解説しています。
7-2.カテゴリの表示に固定ページを利用する方法
カテゴリページを指定すると抜粋表示でカテゴリの属するドキュメントが総て一覧で表示されます。
しかし一覧で表示されても何処にどのような情報があるのか？は良く分かりません。
そこでカテゴリの解説を固定ページとして記述し、カテゴリアが指定された時にこの解説が表示されるとカテゴリの全体像が判り易くなります。
下記ドキュメントは、これを可能とするためのテクニックを解説しています。
Twenty Twelveのカテゴリ表示に固定ページを利用する
7-3.問い合わせフォームを作成する
固定ページに必要なのは読者からの問い合わせを受けるメールフォームです。
下記ドキュメントはこれを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を解説しています。
Contact Form 7のインストールとメール設定
上記の設定でメールを送れるようになりましたが、『Contact Form 7』のディフォルト設定では画面の幅が狭かったり、確認用のメールアドレス機能がない等の課題があります。
このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を解説しています。
以上でWordpressの一通りの機能は構築できるようになったと思います。
あとは構築したサイトをオープンにする事と、更なる追加機能はWordpressをキーワードにして色々なサイトを検索すると、もっと色々な事ができるようになりますので勉強してください。
以上で『WordPressの基本を理解する』テーマは完了です。
これ以降はこれは追加した方が良い等のテーマがあった段階で順次追加していきます。