【テーマを作成したい人必見！】WordPressページを解説
今、ブログを作る際の選択肢はlivedoorなどの既存のブログサービスを利用するか、Wordpressを使って作成するかの2つに分かれます。
WordPressでブログを作る際のメリットとして、自分で自由にテーマを選択できるのと、プラグインを使ってお問い合わせフォームなどの機能を実装できることなどがあげられます。
素人の方でも簡単にマスターできるので、Wordpresでブログを作るのは非常に人気です。
そんなWordpressですがほとんどの方は存続のテーマをそのまま使っている人が多いと思います。しかしテーマそのままを使っているとレイアウトの調整などをすることができません。
そんなときWordpressのテーマの構造を把握しておくと、レイアウトを修正したりすることが簡単にできるようになります。Wordpressのテーマを編集するとなると敷居が高く感じる人が多いと思いますが、実はWordpressは「html/css」の内容がわかる人だと簡単に編集することができます。
今回の記事では、簡単なブログのトップページのコードを解説しています。Wordpressのテーマが、どのように作られているのか学んでいただけたら幸いです。
目次
WordPressでWebページが生成される仕組み
WordPressは、読み込むファイルを部分ごとに作ることができます。
なのであらかじめ、Webサイトのパーツごとのファイルを呼び出すことで１つのWebページが表示されます。
基本的な構成ファイルとしては
- index.php
- header.php
- sidebar.php
- footer.php
- function.php
上記の５つのファイルから構成されます。
これらのファイルが組み合わさって１つのWebページを制作することができます。
これらはそれぞれ
- index.php:トップページに表示されるファイル
- header.php：metaタグや、title、ヘッダーなどの情報が入っている
- sidebar.php：サイドバーの情報が入っている
- footer.php：フッター情報が入っている
- function.php：プラグインやダッシュボードなどの設定をする
以上のような情報が記述されています。
呼び出すコードをみる
それでは各ファイルを呼び出して見ましょう。以下のコードで各ファイルを呼び出すことができます。
- <?php get_header(); ?>：header.phpを呼び出す
- <?php get_footer(); ?>：footer.phpを呼び出す
- <?php get_sidebar(); ?>：sidebar.phpを呼び出す
また自分で名前をつけたファイルは
- <?php get_template_part(‘ファイル名.php’); ?>：ファイル名.phpを呼び出す
を使うことで呼び出すことが可能です。
ファイル構造としては以下のようになっています。
テーマファイル
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── function.php
└── style.css
ファイルは全て同じディレクトリ上にあります。
本当に呼び出せるのか確認してみる
さてでは先ほどコードが正しいのかシンプルなコードを見て確認してみましょう。
index.php
<?php get_header(); ?> <div id="main"> <p>メインコンテンツ</p> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
header.php、<head>などの情報も記述されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" >
<title> <?php bloginfo('name'); ?> </title>
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
sidebar.php
<div id="sidebar"> <p>サイドバー</p> </div>
footer.php
<div id="footer"> <p>フッター</p> </div> </body> </html>
style.css
#header,#sidebar,#main,#footer{
border:solid 1px #000;
margin:10px;
}
実際に実行してみると、下の画像のようになります。
これを見てもらうと、実際にヘッダーやフッターがindex.phpに呼び出されたことを確認していただけたと思います。
トップページを作ってみる(index.php)
各ファイルが呼び出し方が、おわかりいただけましたでしょうか？
さて今度は先ほどの内容を踏まえて、よりWordpressらしいページを解説していきたいと思います。
以下の画像のページについてご説明いたします。
このページのコードは先ほど全く違うコードになります。
なのでindex.php、header.phpなどの各ファイルを、１つずつ確認していきたいと思います。
index.php
まずindex.phpの内容から
<?php get_header(); ?> <div id="main"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div > <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
さて見てみるとなにやら「訳のわかないコードがいっぱいだ…」と思う方もいっらしゃるかと思いますが、１つ１つ解説していきます。
まずはコードの中央にあるものから見ていきましょう。
- <?php the_permalink(); ?>：個別記事へのリンク
- <?php the_title(); ?>：個別記事のタイトル
- <?php the_content(); ?>：個別記事の本文
このようになっています。
そして次に
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> //さっき説明したもの省略 <?php endwhile; endif; ?>
先ほど説明をしたものを抜いて、残ったこれらのコードについてご説明いたします。
これらのコードは中央にある内容を、
「Wordpressにある記事数分だけ表示する」
という内容です。中央にあるものは記事のタイトルと本文なので、コード全体の意味は
WordPressにある記事のタイトルと本文を全て表示する
ということです。
ここまでがindex.php内のメインコンテンツ部分の説明でした。
次にヘッダーを制作しましょう。
header.php
こちらもまず全体のコードを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
<title>
<?php bloginfo('name'); ?>
</title>
</head>
<body>
<div id="page">
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
<img src="<?php bloginfo('template_url'); ?>/top.png" width=1024px>
</div>
さて、こちらのコードも普段のhtmlでは見られないものが多くありますね。
見慣れないコードとそれぞれに意味をまとめています。
- <?php bloginfo(‘name’); ?>：ブログのトップページのurl
- <?php bloginfo(‘description’); ?>：ブログのサブタイトル
- <?php bloginfo(‘template_url’); ?>：テーマのアドレス
このようになっています。
１つ注意点を言っておくと画像やテーマを引用する際は<?php bloginfo(‘template_url’); ?>でテーマのアドレスを指定してその後に画像があるディレクトリを指定する必要があるので注意して下さい。
<div id="footer"> <p>Copyright © Uetani Ryota All Rights Reserved.</p> </div> </div> </body> </html>
今回のfooterに関しては、普通のhtmlと同様のものです。特にWordpress独特の内容はありませんね。
サイドバーについて
さてサイドバーですが、ダッシュボードのウィジェットの設定を反映させるようにしてみましょう。
まず初めにダッシュボードウィジェットを表示させるためfunction.phpに以下を記述する必要があります。
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
これでダッシュボードでウィジェットが表示されます。
次にウィジェットの内容をsidebar.phpに表示させます。
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<li>
<h3>Categories</h3>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<div id="clearfix"></div>
これでウィジェットの設定がsidebar.phpに反映されるようになりました。
style.cssについて
最後に解説しているページのcssソースを掲載しておきます。
@charset "utf-8";
/*
Theme Name: Original
*/
#page{
width:680px;
margin:0 auto;
}
#header{
margin-bottom:10px;
background:#fff;
}
#main{
width:500px;
float:left;
}
#main div{
width:500px;
height:100px;
background:#fff;
margin-bottom:5px;
}
#main div h2{
margin-bottom:10px;
}
#main div p{
margin-bottom:10px;
}
#sidebar{
width:170px;
float:right;
background:#fff;
}
#footer{
margin-top:0px;
text-align: center;
background:#fff;
}
ul,li{
list-style-type:none;
}
li h2{
text-align: center;
border-bottom:solid 1px #eee;
margin:5px 0;
}
li{
margin:2px 0;
}
#clearfix{
content:".";
display:block;
clear:both;
}
body {
font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," ＭＳ Ｐゴシック","MSPGothic",sans-serif;
font-size:15px;
background:#f2f2f2;
color:#1f1f1f;
}
a{
text-decoration: none;
color:#0000ff;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
form,input,p,blockquote,th,td {
margin:0;
padding:0;
}
img {
border:0;
vertical-align: top;
}
見ていただくと基本的には普通のcssであるということがわかります。
ですが、Wordpressのstyle.cssを記述する時は１つだけ注意点があります。
style.cssの冒頭に以下のコメントアウトがあります。
/* Theme Name: Original */
ここではWordpressのテーマの名前を記述します。
ここを記述しておかないとWordpressのテーマの名前が制作に反映されなかったり、プラグインに不具合が起こったりしますので、必ず記述するようにしてください。
最後に
いかがでしょうか？
WordPressのトップページの構造について解説をしてみました。Wordpress独特の記述がありますがそれ以外はhtmlとcssの内容だとわかっていただけると思います。
自分で少しずつ勉強をしていくことでWordpresをより理解することができるようになります。
Wordpressでテーマを制作したい人に参考にしていただけると幸いです。