解体屋のおじさんでも出来るシリーズ(webサイト作成)

wordpressの簡単テーマ作成

(2015年03月29日)

さてと解体屋のおじさんです、こんにちは。

んで、スマホ対応の話も今日で最後にしようかな？とか考えております。
4/26をもって「スマホ対応」されてないサイトはgoogleからランキング落ちますが、

それまでに対応しろといったところで無理な人は無理だし（＾＾；；
クロスロードやiタウンページ使っているところは、向こうが勝手に対応してくれるから何もしなくていいし。

結局ね。自分はwebサイトでお金払うのが嫌なんですよ。
どうしてもお金払うのなら、自由にカスタマイズできるサーバーの方に払います。勉強しながらね。

クロスロードさんもiタウンページさんも悪いとは言いませんが、そんなのに月3000円も払いたくない、と。
自分が契約しているレンタルサーバーは年間6000円（月五百円）でデザインは自由に作成も変更も可能です。

しかもwordpress使えるので。

さてと話題がそれました。
話題を元に戻しますと、今日はcss以外のwordpressテーマの作成の仕方を書こうと思いますが。

一応前提として、「html」「css」読めるのが大前提の下で話させていただきます。

でも、作成する前に一言。
wordpress、別に無理してテーマ作成しなくても大丈夫ですよ。
既にできてある「PRnews」とかのテーマを選べば、それだけで終了します。

自分は同一デザインにこだわっているので、自力で作成とかしているわけです。

さてといきます。

まずおさらいとしてcssですが、冒頭にこんなのを書きます。

/*
Theme Name: Child
Template: twentytwelve
*/

@charset "utf-8";

これは、wordpressテーマ「twentytwelve」の子テーマである、と宣言するところです。
これだけは書いといてください。でも、インポートとかはしないでいいです。

インポートするとtwentytwelveのデザインが入ってきて、その上からカスタマイズになってしまうので、
そこは書きません、と。

うんで、次になんですが、index.phpを作成なんですが、
これね。拡張子だけｐｈｐとか書かれてありますが、htmlで書いて、拡張子だけphpと書いてください。

こんな感じです。

「index.php」

-----------------------------------------------------------------------------------------------

<?php get_header(); ?>
<div id="container">
<div id="contents">
<div id="main"> 
	<?php get_template_part( 'loop' ); ?>
	</div>
  <div id="sub">
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>

----------------------------------------------------------------------------------------------

そして、herder.phpにhtmlの頭の部分、loop.phpは記事の内容、sidebar.phpとは横のサイドバーのhtml部分、footer.phpにhtmlの下の部分を書いていきます。

「herder.php」

---------------------------------------------------------------------------------

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="copyright" content="Template Party">
<meta name="google-site-verification" content="uNzBliHdbTZR5PVdy9Z8ZFQzeMfBpoH4ly83gGycm6U" />

<meta name="format-detection" content="telephone=no" />

<title>「池間自動車解体所」沖縄県中古トラック解体屋|解体業|解体業者</title>
<meta name="description" content="沖縄県の中古トラック解体業者【池間自動車解体所】です。中古トラック車体（本体）を探している方、或いは中古トラックパーツを探している方、弊社に探しに来て見ませんか？お待ちしております。"/>
<meta name="keywords" content="沖縄県,トラック,解体,自動車,中古トラック,エンジン,ボディー,ディーゼルエンジン,中古車,自動車解体,トラック解体屋,解体屋,トラック販売,トラック解体部品,トラックパーツ,トラックパーツ販売,解体業者,中古トラックパーツ,リサイクル,トラック部品,"/>
<meta property="og:image" content="http://ikema-automobile.com/9.jpg" />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen, projection,print”” />

<link href="css/style-s.css" rel="stylesheet" type="text/css" media="only screen and (max-width:480px)">
<link href="css/style-m.css" rel="stylesheet" type="text/css" media="only screen and (min-width:481px) and (max-width:850px)">
<!--[if lt IE 9]> 
<script src="js/Respond.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 <!--[if lt IE 9]>
<script src="html5shiv-printshiv.js"></script>
<![endif]-->

<script src="respond.src.js"></script>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


<!-- CSS -->

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-38963413-5', 'ikema-automobile.com');
  ga('send', 'pageview');

</script>

<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- Google+のウィジェット表示用ライブラリの読み込み -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>


<?php wp_head(); ?>
</head>


<body id="contact">

<h1><a href="index.html">沖縄県トラック解体屋/解体業/解体業者/リサイクル</a></h1>

<div id="container">

<header>
<h2><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo5.png" width="369" height="40" alt=""></a></h2>
<a href="tel:09-8874-6390"><figure id="banner1"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner8.gif"
width="300.8" height="47"　alt="電話番号"></figure></a>
</header>
<nav id="menu">
<ul  id="l_box" style="list-style:none;" >
<li><a href="http://ikema-automobile.com/">ホーム<span>HOME</span></a></li>
<li><a href="http://ikema-automobile.com/profile.html">事業所概要<span>PROFILE</span></a></li>
<li><a href="http://ikema-automobile.com/truck/" >トラック販売<span>truck for sale</span></a></li>
<li id="current"><a href="http://ikema-automobile.com/truck_parts/" >tパーツ販売<span>t Parts for sale</span></a></li>
<li><a href="http://ikema-automobile.com/map.html">地図<span>MAP</span></a></li>
<li><a href="http://ikema-automobile.com/contact.html">お問い合わせ<span>CONTACT</span></a></li>
</ul>
</nav>
<div class="clear"></div>
<div class="clearleft"></div>

-----------------------------------------------------------------------------

次いきますよ。
loop.phpです。
-------------------------------------------------------------------------------

<div id="main" class="box">

<span class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>

</span>

<span style="float: right;">
<?php if(function_exists("wp_social_bookmarking_light_output_e"))
{wp_social_bookmarking_light_output_e();} ?>
</span>

<hr color="#dddddd" size="1" style="clear: both;">



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

<div>
   <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   <span class="post-date"><?PHP echo get_the_date(); ?></span>

   <?php
     $post_time = get_the_time('U');
     $days = 70;
     $last = time() - ($days * 24 * 60 * 60);
     if ($post_time > $last) {
          echo '<span strong class="color1" >NEW</span>';
     }
?>

   <span class="category"><?PHP the_category(', ') ?></span>


   <?php the_content(); ?>
   <hr color="#dddddd" size="1">
</div>


<?PHP 
endwhile; 
?>
<?PHP
else :
?> 


   <div id="main">
   <h2>File not found</h2>
      <p>該当のページは見つかりませんでした。<br>
      下記(アーカイブ)もご参考にしてくださいませ。
      <br>
      ちなみにこのページの検索結果は「tパーツ販売ページの検索結果」です。<br>
      トラック本体をお探しの方は、「トラック販売ページ」の「検索」か「カテゴリー」からお探しくださいませ。宜しくお願い致します。



      </p>
         

         <div class="entry-content">
         <?php the_content() ?>
         <?php wp_get_archives("type=postbypost");?>
         </div>
         </div>

<?PHP
endif; 
?>

<?php
            if ( $wp_query -> max_num_pages > 1 ) : ?>
               <div class="navigation">
                  <div class="alignleft"><?php next_posts_link('&laquo; 前の記事'); ?></div>
                  <div class="alignright"><?php previous_posts_link('次の記事 &raquo;'); ?></div>
               </div>
            <?php 
            endif;
            ?>


</div>

------------------------------------------------------------------------------------

更に次に行きます。
「sidebar.php」です。

--------------------------------------------------------------------------------


<div id="sub">

<nav>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<h3>About</h3>
	<p>ウィジェットが設定されていない場合、ここが表示されます。</p>
<?php endif; ?>

</div>

----------------------------------------------------------------------------------

これは簡単かな？

そして最後に「footer.php」を書きます。
---------------------------------------------------------------------------



<center>
        <ul class="sn" style="list-style:none;">
<li>
    <smail><a href="http://ikema-automobile.com/index.html">ホーム｜</a></smail></li>
<li>
    <smail><a href="http://ikema-automobile.com/profile.html">事業所概要｜</a></smail></li>
<li>
    <smail><a href="http://ikema-automobile.com/truck">トラック販売｜</a></smail></li>
<li>
    <smail><a href="http://ikema-automobile.com/truck_parts">Tパーツ販売｜</a></smail></li>
<li>
    <smail><a href="http://ikema-automobile.com/map.html">地図｜</a></smail></li>
<li>
    <smail><a href="http://ikema-automobile.com/contact.html">お問い合わせ｜</a></smail></li>
    <li>
    <smail><a href="http://ikema-automobile.com/kaitori.html">トラック買取｜</a></smail></li>
    <li>
    <smail><a href="http://ikema-automobile.com/faq.html">よく頂く質問｜</a></smail></li>
    <li>
    <smail><a href="http://ikema-automobile.com/link.html">リンク集｜</a></smail></li>
    </ul>
    </center>
    <br>

    <p id="pagetop"><a href="#">↑ PAGE TOP</a></p>
    </div>
<footer>
<center>
<small><a href="http://ikema-automobile.com/index.html">池間自動車解体所|Ikema automobile dismantling plants|</small><br>
<span class="pr"><a href="http://template-party.com/" target="_blank">Web Design:Template-Party</a></span>
</center>
</footer>


<!--/container-->
<?php wp_footer(); ?>
</body>
</html>

-----------------------------------------------------------------

そして、あともう一つ。意味が解らなくても良いので、functions.phpというのに以下を書きます。
これはサイドバーのプログラムです。

「functions.php」
----------------------------------------------------------------


<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2 class="widget_title">',
        'after_title' => '</h2>',
    ));
?>

------------------------------------------------------------------
そして、ついでにsingle.phpも書いときますか。
こんな感じです。

「single.php」
------------------------------------------------------------------

<?php get_header(); ?>
 <div id="contents">
 <div id="main">
 
<span class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</span>

<span style="float: right;">
<?php wp_social_bookmarking_light_output_e(null, get_permalink(), the_title("", "", false)); ?>
</span>

<div class="clear"></div>

<hr color="#dddddd" size="1" >


<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
 
  <div>
  <h2><?php the_title(); ?></h2>
  <span class="post-date"><?PHP echo get_the_date(); ?></span>
    
   <?php
     $post_time = get_the_time('U');
     $days = 70;
     $last = time() - ($days * 24 * 60 * 60);
     if ($post_time > $last) {
          echo '<span strong class="color1" >NEW</span>';
     }
?>


    <span class="category"><?PHP the_category(', ') ?></span>
  <?php the_content(); ?>
  
  </div>
 
<?php
endwhile;
endif;
?>




<section class="nav-single">
  <?php
  $prevPost = get_previous_post(true);
  $nextPost = get_next_post(true);
  $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(65,65) );
  $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(65,65) );
 
  if($prevPost) {?>
    <div class="nav-previous">
    <center>
      <h3>前の商品</h3>
      <?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
    </div>
 </center>
  <?php }
  if($nextPost) { ?>
    <div class="nav-next">
      <center>
      <h3>次の商品</h3>
      <?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
    </div>
    </center>
  <?php } ?>
</section>








</div>
 <div id="sub">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

--------------------------------------------------------------------
と、ここまですべて作成したうえで、Childというフォルダを作成して全部中に入れて、ftpでwordpressの中に入ってthemesの中にフォルダごと転送。

これで子テーマ作成完了になります。あー長かった（＾＾；；

でも、もう一回書いておきますが。ここまでする必要はないです。
自分の場合は趣味でもあるし、意地でもあるから作成したというだけの話です。

特に興味がない人は無料の作成されてあるテーマを使えばいいかと思います。
その方が簡単ですし。

本気でwebサイト制作を仕事にしたいと考えている、wordpressを作成したことない人は、このブログでもご参考になるかと思います。
一助となれば幸いです。

さてとブログは終了します、朝のコーヒータイム。お疲れ様です。
( ^^) _U~~