【wordpress自作テーマ作り】その6:記事投入＆フッター＆サイドバー作り
記事を効率よく大量に突っ込む
WordPressのサンプルサイトやテストサイトの記事をCSVで一括登録するhttps://plusers.net/wordpress_theme_csv
ここのサイトさんが詳しいですが、csvファイルをGoogleスプレッドシートで作って、『Really Simple CSV Importer』というプラグインで記事を追加できます。
作った記事をメニューに表示
作ったグローバルメニューに固定ページを投入。
外観→メニュー→編集するメニューを選択→固定ページ追加
で勝手にHP上部にメニューが出現。
固定ページや投稿ページ以外にもカテゴリーやタグで仕分けて表示可能。
フッター作り
<footer>
<div class="box8">
<p class="small">やっていくきもち</p>
<div class="sns">
<ul class="social">
<li class="facebook"><a href=""><i class="fab fa-facebook-square"></i></a></li>
<li class="twitter"><a href=""><i class="fab fa-twitter"></i></a></li>
<li class="instagram"><a href=""><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</footer>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</div>
</body>
</html> <footer>
<div class="box8">
<p class="small">やっていくきもち</p>
<div class="small copyright">Copyright © <?php echo date('Y');?> <?php bloginfo('name'); ?> All Rights Reserved.</div>
<div class="sns">
<ul class="social">
<li class="facebook"><a href="https://www.facebook.com/amano.ao"><i class="fab fa-facebook-square"></i></a></li>
<li class="twitter"><a href=""><i class="fab fa-twitter"></i></a></li>
<li class="instagram"><a href="https://www.instagram.com/youyang0000/"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</footer>
<a href="#top" class="page_top">▲</a>
<?php wp_footer(); ?>
</body>
</html>コピーライトを表示
<div class="small copyright">Copyright © <?php echo date('Y');?> <?php bloginfo('name'); ?> All Rights Reserved.</div>ここはフッターのしるし
<?php wp_footer(); ?>前述した<?php wp_header(); ?>と揃うと画面上部にメニューバーが出ます。
この記述も入れておかないとプラグインが動かないと言った不具合が発生するので非常に大事。
フッダーを呼び出す（index.phpに記述）
<?php get_footer(); ?>サイドバー作り
index.phpのサイドバー部分で作っていたもの（プロフィール・カテゴリー）をごっそり削除。
<section>
<div id="content2">
<div class="sidebar">
<div class="side-profile">
<h3>プロフィール</h3>
<p><img src="images/me.png" alt="me"></p>
<h4>YUKO</h4>
<p>現役女子大生です。<br>
ダークチョコレート・フラペチーノが好き</p>
</div>
<div class="side-category">
<h3>カテゴリー</h3>
<p><img src="images/rogo.png" alt=""></p>
<p>記事本文ああああああああああああああああ</p>
</div>
</div>
</div>
</section>サイドバーを呼び出す（index.phpに記述）
<section>
<div id="content2">
<?php get_sidebar(); ?>
</div>
</section>sidebar.phpを作り込む
<div class="sidebar">
<?php get_sidebar('category'); ?>
<?php dynamic_sidebar( 'side-widget' ); ?>
</div> 全然作ってないですが。
カテゴリーの区分けを見やすくしたかったので、sidebar.phpからさらに分割して、sidebar-category.phpというファイルを作って作り込んでいきます。
他、ウェジットといって、wordpress内部から「プロフィール」とか「最近の投稿」とか「カレンダー」とかを好き勝手に入れられる機能があるのでそれを表示させます。
sidebar-category.phpを作り込む
<div class="side-category">
<h3>カテゴリー</h3>
<h4>WEB</h4>
<ul class="catTree">
<?php wp_list_categories('child_of=4&title_li=&show_count=1'); ?>
</ul>
<h4>LIFE</h4>
<ul class="catTree">
<?php wp_list_categories('child_of=3&title_li=&show_count=1'); ?>
</ul>
</ul>
</div><?php wp_list_categories(‘child_of=3&title_li=&show_count=1’); ?>
でカテゴリーに分けた投稿を、リスト化して出す。
＆で「〇〇かつ〇〇」みたいに連続して細かい指定ができるっぽいです。
child_of=3→記事ID「３」の子カテゴリーを出す。
例：WEB（１０）→PHP（６）/html（４） みたいに親要素の中に子要素を提示します。
記事IDの調べ方 wordpress内、投稿ページや固定ページの一覧から、記事タイトルの上にカーソルを当てると、 記事リンクが表示され、その中の「post=〇〇」に書いてある数字がそうです。
title_li=→箇条書きのリスト表示
show_count=1→記事数を表示（ただし記事数の数字を押してもリンクしない）
記事数までリンクを含めるには関数から書き換えなければならず、面倒臭いのでやめました。
サイドバーに表示される各ウィジェットを作り込む
排出されるタグに装飾をつける感じで、作り込んでいくと良いと思います。
下記はcssで「最新の投稿」ウィジェットを装飾しました。
#recent-posts-3 h4{background: #f5f5f5;
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 1rem;
padding: .5rem;
margin-bottom: 1rem;
border-bottom: 0px dotted #999;}
#recent-posts-3 ul{font-size: 1.3rem;
line-height: 3rem;}
#custom_html-2 a{width: 100%;
word-wrap: break-word;}