第6回目のWordPressのサイト作り
前回の記事までの記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
WordPress オリジナルテーマを作る〜ヘッダーその２〜
WordPress オリジナルテーマを作る〜メイン部分〜
WordPress オリジナルテーマを作る〜メイン部分その2〜
WordPress オリジナルテーマを作る〜サイドとフッター〜
出来たhtmlソースをWordpress用に分割する
今日はとうとうWordpressのテーマに変換する方法について書いていきます。
前回までに出来たサイトはこちら
デモサイト
このサイトをWordPress用に分割していきます。
index.htmlをindex.phpに変換
これは拡張子を変更するだけです。
index.phpを分割する
WordPressではヘッダー部分やフッター部分、サイドバーを流用することができます。
今のindex.phpにはヘッダーからフッターまで全ての情報が詰め込まれているのでこのように分割します。
それぞれの中身を見ていきましょう。
まずはindex.phpから
<!-- index.php --> <?php get_header(); ?> <div class="container"> <div class="main"> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li><i class="fa fa-clock-o" aria-hidden="true"></i>投稿日</li> <li><i class="fa fa-folder-open-o" aria-hidden="true"></i>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> </div> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li><i class="fa fa-clock-o" aria-hidden="true"></i>投稿日</li> <li><i class="fa fa-folder-open-o" aria-hidden="true"></i>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> </div> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="ttl">タイトルタイトル</p> <div class="post-meta"> <ul> <li><i class="fa fa-clock-o" aria-hidden="true"></i>投稿日</li> <li><i class="fa fa-folder-open-o" aria-hidden="true"></i>カテゴリ</li> </ul> </div> <div class="post-txt"> <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> </div> </div> </div> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
ヘッダーやサイドバー、フッターなど共通部分を取り除いた状態になります。
ただ、取り除いただけではその要素は表示されないので
ヘッダーがあった位置に
サイドバーがあった位置に
フッターがあった位置に
と書くことでそのphpファイルが読み込まれて表示されるようになります。
次はheader.phpです。
<!-- header.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php bloginfo("name");?></title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#navtoggle').click(function(){
$('header').toggleClass('nav_open');
});
});
</script>
</head>
<body>
<header>
<div class="container">
<h1><a href="<?php echo home_url(/); ?>"><?php bloginfo("name");?></a></h1>
<h2>Webサイト作成時に勉強したことの備忘録</h2>
</div>
<div id="navtoggle">
<div class="navwrap">
<span></span>
<span></span>
<span></span>
</div>
</div>
<?php wp_nav_menu(); ?>
</header>
<?php wp_head(); ?>
ここで、テンプレートタグが登場しました。
テンプレートタグというのは、WordPressにすでに登録している情報を簡単に呼び出すことができるすぐれものです。
これがあることで登録している原本を変えるだけで全部のページ一気に変えることができます。
テンプレートタグについてはこちらの記事にまとめている最中です。
WordPress テンプレートタグ
header.phpの中で特に忘れては行けない部分はスタイルシートのリンクと最後にをつけるということです。
まずスタイルシートのリンクを変えないとせっかく書いたスタイルが読み込まれません。
そしてを忘れるとプラグインがうまく機能しないこともあるので忘れないようにしましょう。
次はsidebar.phpについて
<!-- header.php --> <div class="side"> <div class="widget"> <div class="category"> <ul> <li class="parent"><a href="">サイト構築</a></li> <li class="child"><a href="">CSS</a></li> <li class="child"><a href="">HTML</a></li> <li class="child"><a href="">JavaScript</a></li> <li class="child"><a href="">jQuery</a></li> <li class="child"><a href="">Wordpress</a></li> <li class="parent"><a href="">ツール</a></li> </ul> </div> <div class="widget-post"> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> <div class="post"> <img src="img/no-img.png"> <div class="post-content"> <p class="date">投稿日</p> <p class="ttl">タイトルタイトル</p> </div> </div> </div> </div> </div>
サイドバーについてはとりあえず変更する部分はありません。
次回以降の記事でウィジェットの作り方を紹介していきます。
最後にfooter.phpについて
[/php]