ワードプレスというと、特にphpプログラムをやる人にとっては、食わず嫌いというのはありますよね。
だがしかし、実際いじってみると感心するほどよく出来ているわけで、まず最初の一歩を踏み出してみるのもよいのではなかろうかという話。
参考書
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版
エンジニアのためのWordPress開発入門 (Engineer's Library)
インストール
vagrantを利用した開発環境が公開されているのでこれで一発です。
git clone https://github.com/vccw-team/vccw.git
vccwフォルダーが生成されるので、その中に入って、
vagrant up
とやるだけ。データベースも作ってくれてるので楽です。
ただそのままだと日本語版WPが入らないのでvccwフォルダー内に
lang: ja
を作ってやると、日本語版になります。
元々の設定は以下のファイルで、
provision/default.yml
変更したいものだけsite.ymlに書けばよいようです。
で、hostsに
192.168.33.10 vccw.test
と追加して、ブラウザからvccw.testを開けばよい、と。
テーマ作成
既存のサイトのhtml、css、imgを用意しておきます。
/wordpress/wp-content/themes/ 以下に新しくフォルダーを作ります。例えば、
/wordpress/wp-content/themes/mycompany
を作り、その中に既存のサイトのhtml一式を置きます。
で、 index.html を index.php にリネームします。
cssフォルダー内のメインのcssをindex.htmlと同じ階層に移して、ファイル名をstyle.cssにリネームします。
で、index.phpのcssを読み込む部分を、
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet" type="text/css">
に書き換えます。
あと、既存のサイトのスクリーンショットを撮影して、/wordpress/wp-content/themes/mycompany フォルダー内に
screenshot.png
として保存します。(画像サイズ：880 x 660px)
ここで、wp-admin（管理画面）に接続してテーマを開きます。
自分で作った mycompanyテーマ が選べるようになっているので有効化し、サイトを表示して確認します。
まだ画像が表示されていないので、index.phpの中の画像部分を
<img src="<?php bloginfo('template_url');?>/images/logo.gif">
とします。
テンプレート分割
index.php のヘッダー部分、サイドメニュー部分、フッター部分を分割して、それぞれ
- header.php
- sidebar-top.php
- footer.php
というファイル名で保存し、index.phpのその部分には
<?php get_header(); ?>
<?php get_sidebar('top'); ?>
<?php get_footer(); ?>
と入れる。sidebar-top.phpがget_sidebar('top');だ、というのがミソ。よく出来てる。
header.phpは</head>の直前に
<?php wp_head(); ?>
footer.phpは</body>の直前に
<?php wp_footer(); ?>
を入れます。
あとはタイトルタグに管理画面で設定したサイトのタイトルを入れたり、メタタグにキャッチコピーを入れたりします。
<?php bloginfo('name'); ?>
<?php bloginfo('dscription'); ?>
固定ページ
設定の表示設定で
「ホームページの表示」を「固定ページ」に
「ホームページ」を「TOPページ」に設定する。
次にindex.phpをコピーしてファイル名をfront-page.phpにリネーム。
index.phpは以下の内容に書き換える。
<?php echo "index"; ?>
さらに、front-page.phpをコピーしてファイル名をpage.phpにリネーム。
以下の内容に書き換える。
<?php get_header();?>
<?php get_sidebar('top');?>
<div id="content">
<?php
if (have_posts()):
while(have_posts()):
the_post();
remove_filter('the_content', 'wpautop');
the_content();
endwhile;
endif;
?>
</div>
<?php get_footer();?>
あとは固定ページから新規追加していけばよい。親子関係のあるページは、「親」となるページを選べばよいし、表示順序もきちんとしたければ、
親ページは順に100,200,300...とふっていって、子ページは、110,120,130...
とふっていけばよい。
投稿
投稿、と言ってもブログではないので日記を投稿する訳ではない。この場合は新着情報とか、製品情報だろう。
「投稿」の「カテゴリー」から、デフォルトで登録されている「未分類」を編集して「新着情報」に変える。
スラッグを「news」とかにする。
で、投稿の新規追加で「タイトル」「本文」を入力して、カテゴリーは「新着情報」にチェック。
もし製品情報などであるなら、スラッグやパーマリンクに製品番号を入れる。
で、新着情報のリストを入れたい場所（例えばTOPページ）に
<ul id="news_list">
<?php
$news_posts = new WP_Query('posts_per_page=5&category_name=news');
if ($news_posts->have_posts()) :
while ($news_posts->have_posts()) :
$news_posts->the_post();
?>
<li><?php the_title(); ?> / <?php echo get_the_excerpt(); ?></li>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</ul>
というように入れる。ソースはなんとなく分かる範囲だと思うが、カテゴリーが新着情報のデータを5件取得してそれをwhileループでまわしてタイトルと本文を表示している、というようなものだ。
日時表示にしたい場合はこんな感じだ。
<li><?php the_time(get_option('date_format')); ?> / <?php echo the_title(); ?></li>
あとは同じくpage.phpをコピーしてarchive.phpをつくり、コンテンツ部分を
<ul id="news_list">
<?php
if (have_posts()):
$i = 1;
while(have_posts() && $i < 6):
the_post();
get_template_part('content-archive');
$i++;
endwhile;
endif;
?>
</ul>
というようにすればよい。5件表示にしている。
content-archive.phpを作って、表示部分を書く。
<li><?php the_title();?> / <?php echo get_the_excerpt(); ?></li>
詳細ページはsingle.phpという名前でつくればよい。中身は固定ページと同じ。
その他、functions.phpにいろいろ追加しておくと便利。
excerptからpタグを削除する。
remove_filter('the_excerpt', 'wpautop');
template_urlを設定しておく。投稿内で[template_url]と書くことで使える。
function shortcode_templateurl() {
return get_bloginfo('template_url');
}
add_shortcode('template_url', 'shortcode_templateurl');
home_urlを設定しておく。投稿内で[home_url]と書くことで使える。
function shortcode_homeurl() {
return home_url('/');
}
add_shortcode('home_url', 'shortcode_homeurl');
あとはサイト内検索とか問い合わせフォームとか表組みとか、いろいろあるが、主にプラグインをうまくつかって対応することになる。