意外と簡単!? ホームページをワードプレス化しよう
最近はホームページをワードプレス化することも多くなってきたので、メモがてらやり方を書いておくことにしよう。
この記事を見てる人でワードプレスを知らない人はあまりいないと思うけど、一応知らない人のために簡単な説明を。
WordPress（ワードプレス）とは・・・オープンソース・無料で提供されている「ブログシステム」のソフトウェアのことです。 PHP（プログラム言語）と、MySQL（データベース）で作らているWordpressですが、難しい専門知識がなくても簡単に自分だけのブログを作ることができます。
簡単に言うとブログの管理画面みたいなシステムが無料で使えるって事。
ワードプレスは世界中で一番利用されているシステム なので、プラグイン（拡張機能）などが充実していて便利。どれ位便利かというと、ワードプレスで出来ないことは無いと言われてるくらい便利。
そんな便利なワードプレスですが、最近では様々な企業が自サイトとして利用しています。逆に単純なHTMLみたいなサイトはもう殆どと言って良いほど無いんじゃないですかね。
こういった流れもあり、元々ある自分のホームページをワードプレスとして利用したい。だけどやり方が分からない。という方に少しでも役に立って頂ければ幸いです。
ワードプレス化の前の準備
ワードプレスをサーバーにインストールすると「Twenty Ten」と「Twenty Eleven」の2つのテーマが入っていると思いますので、 今回はTwenty Tenをベースにしてホームページをワードプレス化したいと思います。
まず、サーバーからTwenty Tenのフォルダをダウンロードして、フォルダ名を任意の名前に変更してください。
2014/04/18 追記
ワードプレスのテーマには「ブランクテーマ」と呼ばれるカスタマイズ専用のテーマがあるようなので、それを利用したほうが良いかと思われます。
オススメはBones
[blogcard url=”https://themble.com/bones/”]
他のブランクテーマは以下の記事リンクよりどうぞ。
[blogcard url=”https://okilovetv.com/%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e5%8c%96%e5%8f%8a%e3%81%b3%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%81%ae%e3%83%86%e3%83%bc%e3%83%9e/”]
ホームページのワードプレス化
＊この画像に沿って説明します。 
サイトをワードプレス化するのに使用するのは、テーマのフォルダに含まれる以下のphpです。
- index.php
- header.php
- footer.php
- sidebar.php
- functions.php
- single.php
- page.php
- style.css
はじめに
まず初めに自サイトの「index」を開き、</head>の直前に<?php wp_head(); ?> を追加しましょう。
<body>には、として下さい。<?php body_class(); ?>を追加して、<body <?php body_class(); ?>>
次に自身のホームページの「index」のヘッダー部分をコピーして、ワードプレステーマの「header.php」の中身と置き換えます。
で、indexのヘッダー部分は<?php get_header(); ?>と置き換えます。
同様にフッター部分はindexのフッター部分をコピーしてfooter.phpの中身と置き換えます。
次にindexのフッターと<?php get_footer(); ?>を置き換えます。
サイドバーの部分も同様にindexのサイドバーの部分をコピー。 sidebar.phpの中身と置き換え、indexには<?php get_sidebar(); ?>を設置します。
そして自身のcssはstyle.cssで一纏めにして保存して下さい。
indexの部分
上の画像の部分の表示の仕方。
ここはループの部分でブログでいう所の新着記事。新規で記事を書くと自動的にトップに表示されていくアレです。
indexのメインコンテンツの部分を
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
この部分に必要な情報を書き込む
<?php endwhile; ?> <?php endif; ?>
と置き換え、間に必要な情報を書き込んでいきます。
書き込むソース部分
タイトルを表示
<?php the_title(); ?>
長いタイトルなどの表示を制限したい場合は下記のソースと置き換えて、 post_title,0,25の部分の25を制限したい数字に置き換えれば制限することができます。
<?php the_title(); ?> ←文字制限しない場合
<?php $title= mb_substr($post->post_title,0,25); echo $title; ?> ←25文字制限する場合
文字制限数の増減は数字の部分を変更してください。
月日を表示
<?php the_time(‘Y年m月d日’) ?>
アイキャッチ画像を表示
<a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”><?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?></a>
カテゴリ表示
<?php the_category(', ') ?>
タグ表示 <?php the_tags('', ', '); ?>
古い（新しい）記事へ
<?php next_posts_link('古い記事へ') ?> <?php previous_posts_link('新しい記事へ') ?>
その他 /と同じ
<?php bloginfo( ‘template_url’ ); ?>
headerの部分
titleタグ部分を下記に変更
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
descriptionのタグを下記に変更
<meta name=”description” content=”<?php bloginfo( ‘description’ ); ?>”>
スタイルシートのタグを下記に変更
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
footerの部分
ウィジェットの部分を下記に変更（当サイトでは利用していません）
<?php dynamic_sidebar( 'footer-widget' ); ?>
コピーライトの部分を書きに変更
© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.
sidebarの部分
コンテンツ部分を下記に変更 <?php dynamic_sidebar( 'side-widget' ); ?>
singelの部分
ここが記事の部分になります。
完成したindex.phpを複製し名前をsingle.phpに変更。
<?php the_content(); ?>を下記の間に設置します。
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
この間に必要な情報を書き込む
<?php endwhile; ?> <?php endif; ?>
そして最後にコメント欄になる部分<?php comments_template(); ?>を追加すれば完成。
コメント欄が必要なければ、この部分は省いてもかまいません。
pageの部分
ここが一番簡単で、single.phpを複製し、page.phpに名前を書き換えるだけで完成です。
最後に
基本的な事は以上。
最低限の事はコピペだけで出来るので思ったよりも簡単でしょ？
ワードプレスなので、最低限のHTMLの知識はあるという前提で書いてますが、ちょっと分かりにくいかな～(;^_^A
色々抜けてるところもあると思うので、コメントなどでご指摘頂けたらありがたいです。
