【ド素人OK！】WordPressテーマを自作したので道のりをシェアするよ④「動画付き過保護説明」

2019年6月15日　Design,Programing,Wordpress

前回までで、index.phpを５つのファイルに分割し、さらに3つの空のファイルがあると思うので、今のところ8つのファイルがあるかなと思います(^^)

☆テーマ自作の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのWordPressテーマ自作方法！画像＆動画付き「過保護解説」

今回は、早速それぞれにPHPコードを記述していきたいと思います。

私はphpに関しては知識はないですし笑、説明は出来ませんが、Wordpressで使うコードは「お決まり」だったりするので、それくらいは解説出来そうですので、参考にしてみてくださいm(_ _)m

Contents

PHPの関数にはWordpress独自のものがある！

前回、PHPとは？について、functions.phpの説明に絡めて、ざっくり説明しましたが、Wordpressには「独自の関数」というものがあらかじめ用意されています。

関数と言うのは「クリック＜アクション＞したら、赤を表示＜値＞してね！」という、オリジナルのルールのようなものでしたね！

通常であれば、この関数をも、一から組み立てる必要があるのですが、それがすでに用意されているというのはとっても便利です。

「get_headerと書いたら、ヘッダーを呼び出してね！」のような、Wordpress独自の関数を「テンプレートタグ」と言い、下記のサイトにまとめられています。

WordPressテンプレートタグ

つまり、PHPの基礎の書き方に、このテンプレートタグを組み込めば、その値が呼び出せるということですね！

全部覚える必要は全くないです！こういうのがあるんだなぁというのを頭に入れておき、やりながら少しづつ覚えていきましょう(^^)

今回は３つ＋functions.phpのファイルをやっていきます。

今回はheader.php、sidebar.php、footer.phpの３つのファイルをやっていきます。

また、index.phpに、これらのファイルを呼び出すコードを記述していきます。

毎度のことながら、ブログでは淡々とコードを紹介していきますので、動画の方で一緒にやりつつ、答え合わせとして見てもらればと思います(^^)

header.php

<!doctype html>
 
<html lang="ja">
 <head>
    <meta charset="UTF-8">
    <meta content="width=decive-width, initial-scale=1.0" name="viewport"/>
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
 </head>
  <body>
   <header>
      <h1 id="head-title"><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
       <?php wp_nav_menu(); ?> /*functions.phpに書くことで起動する*/
  </header>

<!doctype html>

<head>

<?php wp_head(); ?>

</head>

<body>

<?php wp_nav_menu(); ?> /*functions.phpに書くことで起動する*/

</header>

sidebar.php

 <div id="main-body-right">
<?php dynamic_sidebar(); ?>　/*functions.phpに書くことで起動する*/
  </div>

<?php dynamic_sidebar(); ?>　/*functions.phpに書くことで起動する*/

</div>

footer.php

      <footer>
        &copyright; Koala, 2019 All Rights Reserved.
      </footer>
      <?php wp_footer(); ?>
  </body>
</html>

</footer>

<?php wp_footer(); ?>

</body>

</html>

index.php

index.phpに関しては、今回は黄色い部分3つだけになります！

<?php get_header(); ?> 
<!--header end-->
 
  <div id="main-body">
    <div id="main-body-left">
      <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
    <div class="blogcard">
      <img src="default.jpg" width="150" height="150">
      <div class="posts">
        <h2>hello!newテーマ</h2>
        <div class="info">2019年6月10日　【カテゴリー】</div>
        <p>これからテーマを作っていきます</p>
      </div>
      </div>
      <div id="prenext">
        <div class="pre">pre</div>
        <div class="next">next</div>
     </div>
 
    </div>
<!--left end-->
 
<?php get_sidebar(); ?>  
<!--sidebar end-->
</div>
 
<?php get_footer(); ?> 
<!--footer end-->

<?php get_header(); ?>

<h2>hello!newテーマ</h2>