3⃣ header.php/sidebar.php/footr.php部分‐オリジナルをつくる編‐
2016/04/08
❸ header.php部分の書き換え‐オリジナルをつくる編‐
header.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content="Template Party"> <meta name="description" content="<?php bloginfo('description'); ?>"> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5"> <!---<link rel="stylesheet" href="css/style.css">変える↓---> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!---<script type="text/javascript" src="js/openclose.js"></script>変える↓---> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/openclose.js"></script> <?php wp_head(); ?> </head> <body id="top"> <header> <div class="inner"> <h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" width="400" height="50" alt=""></a></h1> <address><span class="tel">Tel:03-0000-0000</span>受付:9:00~17:00 休業日:土日祝</address> </div> </header> <nav id="menu"> <ul id="menubar"> <li><a href="<?php bloginfo('url'); ?>">ホーム<span>HOME</span></a></li> <li><a href="<?php bloginfo('url'); ?>/company">会社概要<span>COMPANY</span></a></li> <li><a href="<?php bloginfo('url'); ?>/service">サービス<span>SERVICE</span></a></li> <li><a href="<?php bloginfo('url'); ?>/recruit">採用情報<span>RECRUIT</span></a></li> <li><a href="<?php bloginfo('url'); ?>/link">リンク<span>LINK</span></a></li> <li><a href="<?php bloginfo('url'); ?>/contact">お問い合わせ<span>CONTACT</span></a></li> </ul> </nav> |
❹ sidebar.php部分の書き換え‐オリジナルをつくる編‐
sidebar.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div id="sub"> <nav class="box1"> <h2>SUB MENU</h2> <ul> <li><a href="#">主要リンクサンプル</a></li> <li><a href="#">主要リンクサンプル</a></li> <li><a href="#">主要リンクサンプル</a></li> <li><a href="#">主要リンクサンプル</a></li> <li><a href="#">主要リンクサンプル</a></li> </ul> </nav> <aside> <h2>関連情報</h2> <ul class="submenu"> <li><a href="#">関連情報リンク</a></li> <li><a href="#">関連情報リンク</a></li> <li><a href="#">関連情報リンク</a></li> <li><a href="#">関連情報リンク</a></li> <li><a href="#">関連情報リンク</a></li> </ul> </aside> <section class="mb15"> <h2>製品情報</h2> <?php $loop = new WP_Query(array("post_type" =>"service","posts_per_page" =>5)); while($loop->have_posts()): $loop->the_post(); ?> <section class="box2"> <a href="<?php the_permalink(); ?>"> <figure><?php the_post_thumbnail(array(60,60)); ?></figure> <h4><?php the_title(); ?></h4> <p><?php the_content(); ?></p> </a> </section> <?php endwhile; ?> </section> </div> <!--/sub--> |
❺ footr.php部分の書き換え‐オリジナルをつくる編‐
書き換えたfooter.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<ul id="footermenu"> <li><a href="<?php bloginfo('url'); ?>">ホーム</a></li> <li><a href="<?php bloginfo('url'); ?>/company">会社概要</a></li> <li><a href="<?php bloginfo('url'); ?>/service">サービス</a></li> <li><a href="<?php bloginfo('url'); ?>/recruit">採用情報</a></li> <li><a href="<?php bloginfo('url'); ?>/link">リンク</a></li> <li><a href="<?php bloginfo('url'); ?>/contact">お問い合わせ</a></li> </ul> <p id="pagetop"><a href="#">↑ PAGE TOP</a></p> </div> <!--/contents--> <footer> <small>Copyright© <?php echo date('Y');?><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> All Rights Reserved.</small> <span class="pr"><a href="http://template-party.com/" target="_blank">Web Design:Template-Party</a></span> </footer> <!--スライドショースクリプト--> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slide_simple_pack.js"></script> <!--スマホ用更新情報--> <script type="text/javascript"> if (OCwindowWidth() < 480) { open_close("newinfo_hdr", "newinfo"); } </script> <?php wp_footer(); ?> </body> </html> |
❻ functions.phpを新規に作ります。
管理画面にウィジェットの項目を追加する「functions.php」を作成。(ヴィジェット用の関数を作成しなければならない。)今回のサイトのスタイルでは特に必要はありませんが、記載方法を載せておきます。
functions.php(ヴィジェット用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php register_nav_menus(array( 'main_navigation' => 'Primary Navigation' ) ); ?> <?php register_sidebar( array( 'name' => 'サイドバーウィジェット', 'id' => 'sidebar', 'description' => 'サイドバーのウィジェットエリア', 'before_widget' => '<div class="section">', 'after_widget' => '</div>', ) ); ?> |