2014/11/13

Wordpress 既存サイトのwordpress化

既存サイトをワードプレス化するにあたっての情報です。

なぜワードプレスを使用するか。
ブログなどをHTMLだけで管理している場合、
記事が増えた際に管理しにくくなってきますので、wordpressなどのCMSなどが便利です。
例えば、ブログ記事や、メディア記事などを時系列に、
同じようなデータ構造の内容を管理したい場合に最適です。

最近ではconcrete5という汎用的かつ高機能のCMSツールもあるようです。
wordpressはblogなどの紋切り型のコンテンツを管理したい場合に向いているかと思います。

今回説明する内容
・ワードプレスのインストール
・テーマの作成(テンプレートのレイアウト設定など、詳細は以下を確認してください)
・ページャーの設定
・/wpがwordpressページとなるようにリダイレクト設定
・その他、設定など、詳細は以下

あくまでも備忘録としての認識。

【実行環境】
phpバージョン5.2以上
MySQLバージョン5.0以上

【ワードプレス公式サイトよりインストール】
https://ja.wordpress.org/
ダウンロードより、wordpress 4.0をダウンロード

【ワードプレスのバージョン】
4.0

【ワードプレス、インストール箇所】
/wordpress/
既存のサイトを運用しているサイトにwordpressディレクトリをFTPなどでアップロードしてください。
その後ホスト/wordpressにアクセスし、DBの設定などを行う。
そして管理画面にログインする。

【新イベントページTOP】
/wp/
※リダイレクト設定により
wordpressのままでは長いのでwpに変更
【ワードプレス管理画面】
/wordpress/wp-admin/

【テーマの編集】
テーマとはワードプレスページのデザインのこと。
ワードプレス側にテーマを与えることによって、固定したページレイアウトとなる。
例えば大枠は、ヘッダー、左サイド、ボディ、ボディの記事部分、
フッターに分けています。

○テーマのCSSを編集したい場合は、
1.左サイドメニュー、外観 > テーマ編集を選択
2. style.cssの編集が「ファイルを更新」のボタンより可能

○テーマのレイアウトの説明
既存htmlをベースに以下に分割。

index.php(メインテンプレート)
header.php(共通ヘッダー,グローバルメニューなどの共通部分)
footer.php(共通フッター)
sidebar.php(左サイド、記事の部分)
single.php (単一記事の投稿用)
loop.php (記事一覧のループ箇所)

それぞれのページをテンプレート化することによって、
個別にphpで呼び出しています。

例えば、index.phpの場合、header部分の呼び出しには、

でヘッダー部分のソース、header.phpを読み込んでいます。

header.phpの中身を確認してみると、
ところどころにphpのタグがありますが、
meta, titleタグの部分など、WP用のタグに変更しています。

何を読み込んでいるのかの確認はこちら

日本語版wordpressチートシート
http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/

管理画面からテーマ編集をすることが面倒な場合は、
/wordpress/wp-content/themes/【テーマの名前】内をエディターで編集

【記事の投稿】
管理画面、ログイン後左サイドメニューの「投稿」

○新規投稿、編集、公開
HTMLの編集は新規投稿ページ内、タブにて、
ビジュアル、テキストがありますが、テキストを選択してください。
その後、プレビューして確認後、公開。

「続きを読む」を追加したい場合は以下のタグを入力することで、
表示されます。
<!--more—>
これは以下のボタンでも挿入可能です。

実態は.more-linkなので、
CSS変更したい場合はstyle.cssに追記してください。

※コメント欄を非表示にしたい場合はこちら
http://wp-exp.com/blog/comment-no-display/

○公開日の設定
デフォルトでは公開日が今日になるので、過去の記事を投稿したい場合は、
新規投稿ページ、すぐに公開するの右、編集リンクより、日付を操作

【記事のページング設定】
デフォルトで、記事3つでページングするようにしています。
ページングのデザインに関して変更したい場合は、cssの調整が必要

【左サイドのアーカイブリスト】
デフォルトで公開している記事があれば、
年月(記事数)を表示。

li要素にクラスを当てるために、
functions.phpにて、archiveのリンクにクラス当てをしています。

【もろもろの設定】
左サイド、設定より確認
メールアドレス、日付、時刻のフォーマットなど要確認

○メールでの投稿
メール投稿したい場合、メールサーバーの設定を行う。

○1ページに表示する最大投稿数の設定
設定 > 表示設定より、1ページに表示する最大投稿数に「3」を設定
ページングのCSSに関しては、style.cssを参照。

○設定 > ディスカッション設定により、
記事のコメントに関しての設定編集など

○設定 > 投稿設定 更新情報サービス
新しい投稿を公開すると、他の更新情報サービスに自動的に通知します。
通知するサイト(yahoo, google, fc2)などを追加。

以上、既存サイトのワードプレス化の説明です。

ワードプレスはカスタマイズすることで、もっといろいろできそうです。
以下のページが参考になるかと思います。
ワードプレス超初心者講座
http://wp-exp.com/