オリジナルのtheme（テーマ）を作る05：記事を表示させる

メニューを後回しにしましたが(^_^;)
やっぱり記事を表示させないとですね・・

<main id="main" role="main">
    <div class="container">
        <section>
        <div class="row">
            <div class="col-xs-12">
                <article>
                <h2><a href="#">記事のタイトル</a></h2>
                <p>記事の本文が入るよ</p>
                </article>
                <!--//article -->
            </div>
            <!--//col -->
        </div>
        <!--//row -->
        </section>
        <!--//section -->
    </div>
    <!--//container -->
</main>
<!--//#main -->

元のHTMLはこんな感じで
とりあえず記事とタイトルを表示させる場所を作りました的な。

これに、テンプレートタグを入れます。

<main id="main" role="main">
    <div class="container">
        <section>
        <div class="row">
            <div class="col-xs-12">
                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                <article>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_content(); ?>
                </article>
                <!--//article -->
                <?php endwhile; endif; ?>
            </div>
            <!--//col -->
        </div>
        <!--//row -->
        </section>
    </div>
    <!--//container -->
</main>
<!--//#main -->

ループ

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

記事一覧は「記事タイトル＋記事本文」が並んでいますので
<?php if(have_posts()): while(have_posts()): the_post(); ?>から<?php endwhile; endif; ?>まで
という形で囲んで、それを繰り返して出力します。

<?php the_permalink(); ?>

記事の個別ページのURLを出力します。

<?php the_title(); ?>

記事のタイトルを出力します。

<?php the_content(); ?>

記事の本文を出力します。
自動的に<p></p>が入るので、pタグで囲んだりする必要はありません。

オリジナルのtheme（テーマ）を作る04：headerを作る

bootstrapを使っているので、ほぼbootstrapの書き方ですが、一部変更してます。
見た目は、後でcssを書き換えて変更していく予定です。

<header id="header">
    <nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
        <h1><a class="navbar-brand" href="#">tomisan.info</a><small>"I tried" of tomisan</small></h1>
        </div>
        <!--//navbar-header -->
        <div class="collapse navbar-collapse" id="globalmenu">
            <ul class="nav navbar-nav">
            <li><a href="#">個別ページ1</a></li>
            </ul>
            <!--//nav navbar-nav -->
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#">リンク1</a></li>
            <li><a href="#">リンク2</a></li>
            <li><a href="#">リンク3</a></li>
            </ul>
            <!--//navbar-right -->
        </div>
        <!-- //collapse navbar-collapse -->
    </div>
    <!--//container -->
    </nav>
    <!--//nav -->
</header>
<!--//#header -->

元はこんなHTMLですが、wordpressのテンプレートタグを入れていきます。

<h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>

サイト名とトップページへのリンク、サイトのキャッチフレーズ（説明）を出力します。

メニュー部分は後回しで(;^ω^)
次は記事のタイトルと記事の本文を表示させよう。。

オリジナルのtheme（テーマ）を作る03：headを書き換える

外観－テーマの編集からindex.phpを選んでHTMLソースをペタッと貼り付けたら
まずはhead内からやってみる。
簡単そうなところから…(~_~;)

<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title><?php bloginfo('name'); ?></title>
<!--css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<!--keyword description -->
<meta name="keywords" content="">
<meta name="description" content="<?php bloginfo('description'); ?>">
<!--og -->
<meta property="og:type" content="website">
<meta property="og:title" content="tomisan.info">
<meta property="og:url" content="<?php echo home_url('/'); ?>">
<meta property="og:image" content="http://tomisan.info/img/tomisaninfo.jpg">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">
<meta property="og:locale" content="ja_JP">
<!--twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tomisanjp">
<meta name="twitter:creator" content="@tomisanjp">
<meta name="twitter:domain" content="tomisan.info">
<meta name="twitter:title" content="<?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image" content="http://tomisan.info/img/tomisaninfo.jpg">
<!-- feed -->
<link rel="alternate" type="application/rss+xml" title="tomisan.info フィード" href="<?php bloginfo('rss2_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="tomisan.info コメントフィード" href="<?php bloginfo('comments_rss2_url'); ?>">
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js"></script>
<script src="http://oss.maxcdn.com/DD_belatedPNG/0.0.8a/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
	DD_belatedPNG.fix('img,.alphaPng');
</script>
<![endif]-->
</head>

bloginfo();

<meta charset="<?php bloginfo('charset'); ?>">

<?php tag(parameter); ?> または <?php tag(); ?>
wordpressのテンプレートタグは、基本的には上記のような書き方をしますが
基本情報を出力するのに使うのが<?php bloginfo(); ?>です。

パラメーターの値は色々あります。

<?php bloginfo('name'); ?>

ブログの名前を出力します。

<?php bloginfo('description'); ?>

ブログのキャッチコピーを出力します。

<?php bloginfo('rss2_url'); ?>

ブログのRSS2.0フィードのURLを出力します。

<?php bloginfo('comments_rss2_url'); ?>

ブログのコメントフィードのURLを出力します。

<?php bloginfo('url'); ?>

ブログのURLを出力します。

<?php echo home_url('/'); ?>
<?php echo home_url(); ?>

ブログのURLを出力します。「/」を入れるとURLの最後に「/」を付けて出力できます。

他にもありますがひとまずこれくらいで。