WordPressでオリジナルテーマを作ろう・骨組み編

こんにちは、ダンナの人です。

WordPressでのオリジナルテーマ作り、前回で構造をある程度理解できたということで今度はベースになる骨組みを作っていきたいと思います(*”ー”)ゞ

WordPressのセッティング

まずはオリジナルテーマを作る用のダミーブログを用意してみました。

こんにちは、ダンナの人です。 このブログはWordpressで書いているのですが、Wordpressが色々カスタマイズ出来て楽しいというのは以前書いたとおり。テーマも自分で作

以前紹介したMAMPを使ってローカル環境にWordpressをインストールしての開設です。

WordPressでオリジナルテーマを作ろう こんにちは、ダンナの人です。 Wordpressでオリジナルテーマを作って遊ぼうとしたわけですが、それにはまずWordpres

ここに前回のテーマ用ファイルをWordpressのthemesフォルダの中に放り込むと、、

テーマとして認識してくれるので有効化しておきましょう。

HTMLの骨組みを作ろう

WordPressのデータはブラウザ用にHTMLで出力されます。なのでまずその出力の先であるHTMLの骨組みから作っていきましょう。今回は構造がわかりやすい投稿記事の個別表示ページ(single.php)を作ってみます。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事タイトル|ブログタイトル</title>
</head>
<body>
<div id="wrapper">
    <header id="header">ブログヘッダー</header>

    <main id="main">
        <article id="content">
            <header id="content-header">個別記事ヘッダー</header>
            <div id="post" class="content-body">記事本文</div>
            <footer id="content-footer">個別記事フッター</footer>
            <section id="comments">コメントエリア</section>
            <nav>ページ送り</nav>
        </article>
        <aside id="sidebar">サイドバー</aside>
    </main>

    <footer id="footer">ブログフッター</footer>
</div>
</body>
</html>

こんな感じでしょうか。大体の構造ができていれば大丈夫なはずです。

パーツに切り出そう

骨組みができたら共通部分を再利用できるようにパーツ化していきます。

まずはこの骨組みを3つのパーツ「header.php」「footer.php」「single.php」に分けていきます。何処で切り合わけるかは好みにもよるのかもしれませんが、わかりやすくheaderfooterのところで分けてみます。

header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事タイトル|ブログタイトル</title>
</head>
<body>
<div id="wrapper">
<header id="header">ブログヘッダー</header>
single.php
<main id="main">
<article id="content">
<header id="content-header">個別記事ヘッダー</header>
<div id="post" class="content-body">記事本文</div>
<footer id="content-footer">個別記事フッター</footer>
<section id="comments">コメントエリア</section>
<nav>ページ送り</nav>
</article>
<aside id="sidebar">サイドバー</aside>
</main>
footer.php
<footer id="footer">ブログフッター</footer>
</div>
</body>
</html>

テンプレートタグで要素を追加していこう

パーツに分けられたら、Wordpressからデータを取り出すためのテンプレートタグを記述していきます。

header.php

まずはヘッダーから。

header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<div id="wrapper">
    <header id="header">
        <h1 class="blog-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
        </h1>
        <p class="blog-description"><?php bloginfo( 'description' ); ?></p>
    </header>

でてきちゃいました「<?php xxx ?>」このPHPタグを使うことでWordpressから必要なデータを受け取り表示しているわけです。例えば。。

<?php bloginfo(); ?>

この辺はまだ解りやすいですね、命令文通り「ブログの情報をください」という意味になります。使い方は()内に、、引数?パラメータ?というんでしたか、欲しい情報を指定してあげるとその値が返ってきます。

例:<h1><?php bloginfo(‘name’); ?></h1>

‘name’と指定すればブログのタイトルを教えてくれるわけです。他にもブログのURLキャッチフレーズなど指定した値を返してくれるわけです。

こうしてみていくと大半が表示したい内容をPHPタグで代入しているのがわかります。でもその中にちょっとタイプの違うのが混じってます?

<?php wp_head(); ?>

このwp_headタグはWordpressのシステムで管理しているヘッダ要素をまとめて出力してくれる便利なタグです。

これを</head>前に書いておくと、、

どちゃっと色んな情報が書き出されているのがわかります。プラグイン等で設定されたデータもここで管理されているので、書き忘れるとプラグインが動かなくなったりする大事なタグです。

※head内のwp_titleタグは廃止予定の非推奨タグですが、まだfunctionを作っていないので仮置きしています

footer.php

次にフッターも見ていきましょう。

footer.php
<footer id="footer">
    <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

<?php wp_footer(); ?>

コチラにもでてきました。wp_headタグと同じような働きのフッターバージョンです。

single.php

次に投稿記事表示の本体となるsingle.phpです。記事ページを表示する際に読み込まれるテンプレートがこのsingle.phpになります。

single.php
<?php get_header(); ?>

<main id="main">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article id="content">
    <header id="content-header">
        <h1 class="entry-title"><?php the_title_attribute(); ?></h1>
    <div class="post-meta">
        <span class="post-category"><?php the_category(', ') ?></span>
        <span class="post-info-author vcard author">
        <span class="fn"><?php the_author_posts_link(); ?></span>
        </span>
        <time class="post-date time date updated"><?php the_date(); ?></time>
    </div>
    </header>

<div id="post" class="content-body">
    <?php the_content();?>
</div>

<footer id="content-footer">個別記事フッター</footer>
<section id="comments">コメントエリア</section>
<nav>ページ送り</nav>
</article>

<?php endwhile; else: ?>
    <p>お探しの記事は見つかりませんでした</p>
<?php endif; ?>

<?php get_sidebar(); ?>

</main>

<?php get_footer(); ?>

分けたパーツを合体させよう

ヘッダとフッタをパーツに分けたのでこのsingle.phpに取り込まないといけません。そこで使用するのが、

<?php get_header(); ?>
<?php get_footer(); ?>
(<?php get_sidebar(); ?> )

インクルードタグと呼ばれるタグたちです。これを記述することで、例えばget_headerならheader.phpの内容がタグを記述した場所へと出力されるわけです。(サイドバーに関しては標準状態だと実体がない(?)ので少しややこしいですが)

さて、ここから少しややこしくなってきます。

条件分岐と記事のセット

single.php
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    →記事表示
<?php endwhile; else: ?>
    <p>お探しの記事は見つかりませんでした</p>
<?php endif; ?>

(*”ー”)・・・。

ループに関しては記事一覧の時に詳しくでいいかと思いますのでまずは条件分岐のところから。

if() – else

if文、もしも〜な条件分岐です。()内の条件に当てはまる場合に次の処理を行ってください、というモノ。elseはそれに当てはまらない場合、という意味になります。

上の例の場合、if(have_posts())「該当する記事があるかどうか」→あればthe_post()「出力できるようにpost変数にセット」else「無ければエラーを表示」という動作をしています。

the_post()

変数に該当記事の情報をセット、、、

例えるならブログというノートがあったとして、今回表示したい記事の載っているページを開いてもらったようなもの。あとはthe_title()the_category()等のテンプレートタグを使うとその項目を読む(HTMLに出力する)ことができるようになるというわけです。

あとはHTMLで表示箇所を作りテンプレートタグで項目指定してやれば記事の内容が出力されます。

表示してみよう

では出来上がったsingle.phpを開いてみましょう。まだフロントページ(記事一覧)が無いのでURLを直接入力するか管理画面から開いて、、

テッテレー!はろーわーるど!(*`へ´*)9

無事記事を表示することが出来ました。

スタイルシートでレイアウト

あとはこれにスタイルを指定してあげると。。

style.css
@charset "utf-8";
/*
Theme Name: Laperm
*/

#body{
padding : 16px;
background-color: #f0f0f0;
}
#wrapper{
width : 100%;
max-width : 1024px;
margin : 16px auto;
padding : 16px;
background-color: #f5f5f5;
}
#header,
#footer{
margin : 16px;
padding : 16px;
background-color: #eee;
clear: both;
}
#main{
margin : 16px;
padding : 16px;
background-color: #f5f5f5;
}
#content{
margin : 16px;
padding : 16px;
background-color: #fff;
width : calc(70% - 32px);
float : left;
box-sizing:border-box;
}
#sidebar{
margin : 16px;
padding : 16px;
background-color: #fff;
width : calc(30% - 32px);
float : right;
box-sizing: border-box;
}

それっぽくなってきました。

骨組み完成!

という事でカスタマイズのもとになる骨組みが完成(?)しました。あとはここに細かい機能を組み込んでいくことになるのですが、、。機能面を制御するにはfunctionも覚えていかないといけません。段々と難しくなってきました(’m’

参考資料:http://wpdocs.osdn.jp/

この記事へのコメント

この記事へのコメントはありません

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です