WordPressテーマを自作2

LINEで送る
Pocket

がじでございまする。

本業が忙しく、なかなか先に進まないでござる。
ちょっとずつでもいいから先に進めてみます。

前回themeフォルダにindex.html, style.css, noimage.pngを配置しました。で、書き忘れてましたけどindex.htmlをindex.phpにしました。

この状態ではまだ名前をPHPにしただけで中身はHTML、さらに階層構造も読み込めていないのでCSSも効いておりません。

というわけでまずは基本となるphpファイルを作っていきます。

  • header.php
  • footer.php
  • sidebar.php
  • functions.php

を作成します。

header.phpですが、index.phpのheader部分を大胆にコピーして変更します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset-context/cssreset-context-min.css">
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
  </head>
  <body>
    <div id="header" class="container">
      <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name');?></a></h1> 
        <h4>This is my first web design</h4>
          <ul class="menu">
            <li><a href="">menu</a></li>
            <li><a href="">menu</a></li>
            <li><a href="">menu</a></li>
          </ul>
     </div><!-- /header -->

赤字がPHPのコードです。Htmlのタイトルを[ブログ名|ブログ情報]とし、style.cssを読み込むようにしています。
更にブログ本文のタイトルを[ブログ名]に、タイトルのURLを本ブログのURLに設定しています。

次はsidebar.php、これは今のところindex.phpのsidebarの部分を切り取って貼り付けます。

   <div id="sidebar">
        <div class="widget">
            <h3>カテゴリーとかいろいろ</h3>
            <ul>
                <li><a href="">item</a></li>
                <li><a href="">item</a></li>
                <li><a href="">item</a></li>
            </ul>
        </div>
    </div><!-- /sidebar -->

次にfooter.phpです。これもindex.phpのfooter部分を切り出して貼るだけ。(現時点では)

    <div id="footer" class="container">
        footer
    </div><!-- footer -->

で切り取ってしまったindex.phpですが、header.phpに持って行った部分は

<?php get_header(); ?>

sidebar.phpに持って行った部分は

       <?php get_sidebar(); ?>

footer.phpに持って行った部分は

    <?php get_footer(); ?>

この状態でテーマを有効にしてみるとタイトルとCSSが有効になってちょっとだけテーマっぽくなりました。
140421_01

ここまでの結果をダウンロードはここから

—以下広告—

基礎からのWordPress (BASIC LESSON For Web Engineers)

新品価格
¥3,218から
(2014/4/21 23:42時点)

LINEで送る
Pocket