多くの人々にハピネスを提供する!UNIEARTH

オフィシャルブログ
会社HPへ
お問い合わせ

はじめてのwordpressオリジナルテーマ作成【第2回】

第2回の今回はテーマを部品化して共通で使いまわせるようにしてみましょう。

部品化

ヘッダーとフッター、そしてサイドバーを部品化してどのテンプレートでも共通して使えるようにしてみたいと思います。

第一回でつくったindex.phpを編集していきます。

サンプルコードです。

<?php get_header(); ?>
    
    <div id="main">
    
    </div><!--/main end-->
    
    <div id="sidebar">
        <?php get_template_part( 'template_part/sidebar' ); ?>
    </div><!--/sidebar end-->
    
<?php get_footer(); ?>

sidebarに関しては、他にも共通パートを作成して使うことを想定してtemplate_partフォルダを作り、そこに作成します。
ファイルが多くなると管理しずらくなるのでこのようにしております。

header.phpについて

サンプルコードです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
<?php wp_head(); ?>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
</head>

<header>
…
</header>

language_attributes()について

ブラウザーでlang=”ja”と出力されると思います。
日本語のサイトを構築するのであればテンプレートタグを使わず、サーバーの負荷を少しでも軽減させる意味でも、下記の様に記述しても良いかもしれません。

<html lang="ja">

bloginfo( パラメータ )について

<meta charset="<?php bloginfo( 'charset' ); ?>" />
↓
<meta charset="UTF-8" />

<?php bloginfo('name'); ?>
↓
「設定」→「一般」→サイトのタイトルを表示


<?php bloginfo('stylesheet_url'); ?>
↓
スタイルシートのURLを表示

bloginfo(‘template_url’)について

<?php bloginfo('template_url'); ?>
↓
テンプレートのURLを表示

header.phpは共通で読み込みます。
上記のような記述をすることで、階層深いところからでもリンク切れにならないようにすることができます。

この他にもbloginfo( パラメータ )でいろいろな値をとることができます。
『WordPress Codex 日本語版』で詳しくみることができます。

テンプレートタグ/bloginfo

wp_title( ‘|’, true, ‘right’ )について

wp_title(‘sep’, echo, ‘seplocation’)

要求されているページに応じたページタイトルを作成し、パラメータechoがtrueならば表示する。echoがfalseの場合は、文字列として返します。

sep→区切り文字を指定。

seplocation→区切り文字の連結場所指定(’right’かそれ以外)。

wp_head()について

wp_headアクションをスタートさせます。</head>タグ直前で使用します。

link rel=”alternate”
link rel=”EditURI”
link rel=”wlwmanifest”
link rel=”prev”
link rel=”next”
link rel=”canonical”
link rel=”shortlink”
meta name=”genarator”

などが出力されます。
wp_head()アクションにフックをかけていると、それが出力されます。
例えばSEO対策のプラグインなどがフックをかけている事があります。

footer.phpについて

サンプルコードです。

<footer>
…
</footer>
<?php wp_footer(); ?>
</body>
</html>

wp_footer()について

</body>の直前に wp_footer() を記述します。

このタグを記述すると、管理画面にログイン中に記事をブラウザで見るとwordpressの管理バーが表示されます。
ここにもフックをかける場合がありますので記述しておいた方が良いでしょう。

template_part/sidebar.phpについて

サイドバーも共通で使いそうなので部品化します。
ここにカテゴリーを表示したり、検索窓口やランキングなどを表示します。
このあたりを次回やりたいと思います。

最後に

wordpressのタグは非常にたくさんあり、進化も早いので仕様が変更されることもあります。
情報はたくさんありますので、その都度調べながら構築するのが良さそうですね。

この記事を書いた人

toda

PHPプログラマー toda

最近はWordPress担当しています。備忘録も兼ね、なにかお伝え出来ればと思っています。
趣味はビリヤード、麻雀。大阪の麻雀は3人打ちなんだぜ。

todaの最近の記事

pagetop