WordPressで自作テーマをサクッと作ってみる【その2】

こんにちは。もんしょー（@sima199407）です。

前回の続きからやっていきましょう。

まだの人はこちらからどうぞ。

Table of Contents

今回の流れ

・ヘッダーとフッターの編集
・サイドバーの編集
・index.phpを編集
・ページネーションの修正

メニューを作成

「外観」→「メニュー」からヘッダーに使うメニューを作成します。

カテゴリーや固定ページを設定できますので、適当な項目を追加してみましょう。

そしたら「メニュー設定」→「メニューの位置」のヘッダーナビゲーションに「✔」を入れてましょう。

最後に「メニューの保存」を押して、サイトを確認してみると以下のようになっていればOKです。

タイトルの要素を作成

タイトルに要素を加えていきます。

header.phpのheader-innerクラスの内に追加します。

今回は、文字列で表示しますので以下の通りになります。

[code]

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

</a></h1>

</div>

[/code]
もし、画像をタイトルにするときは以下のようにします。

[code]

</a></h1>

</div>

[/code]

「アップロードした画像へのURL」については画像のフォルダーを事前に作っておき、そこへ画像を置いておくのがいいでしょう。

例) imgというフォルダーなら
URL : img/title.jpg

【コードイメージ】

[code]

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

</a></h1>

</div>

[/code]

ナビメニューを追加する

header.phpのheader-innerの後ろに追加します。

[code]~

</div>

<?php wp_nav_menu( array(

'theme_location' => 'header-nav',

'container' => 'nav',

'container_class' => 'header-nav',

'container_id' => 'header-nav',

'fallback_cb' => ''

) ); ?>

</header>

[/code]

header-innnerの外側で、headerタグの内に収めればオッケーです。

[box03 title="wp_nav_menu(array(　　)) の説明"]
こちらはWordPressのメニュー機能を呼び出すときに使えます。

今回使用したいのは以下のもの
・theme_location(初期値：なし)→テーマの中で使われる位置
・container(初期値：div)→menuを何で囲むか、使えるタグは、 div、nav
・container_class(初期値：menu-{メニューのスラッグ}-container)→　containerのタグのクラス名
・container_id(初期値：なし)→　containerのタグのID名
・fallback_cb(初期値：wp_page_menu)→メニューが表示されていない場合の値

参照はこちら
[/box03]

スマホ用ボタンを追加する

header.phpの

header.phpの<div class="site-title”>の下に追加

[code]

<button type="button" id="navbutton">

<i class="fas fa-list-ul"></i>

</button>

[/code]

fas fa-list-ulはFontAwesomeで設定してあります。

CSSの設定

※【その１】で使ったheaderとheader-innerに要素を確認するため指定しているカラーと高さの設定を削除してください。

削除後のstyle.css[code]
/*確認用に一時記述----------*/
.contents, #sidebar {height: 800px; }

.container {background-color: #9db2ea; }

.contents {background-color: #a5e2ff; }

#sidebar{background-color: #aefffc; }

footer{background-color: #777; }

.footer-inner{background-color: #ddd; height: 250px; }
/*------------------------*/
[/code]

タイトルを画像or文字でcssの範囲が変わってきます。

[code]*タイトルを画像にする場合*/
.site-title {
text-align: left;
}
.site-title h1 {
margin: 0;
padding: 10px 5px 0;
line-height: 1;
}
.site-title h1 img {
width: auto;
height: 70px;
}
.site-title a {
display: block;
}

/*タイトルを文字列にする場合*/
.site-title {
text-align: left;
}
.site-title h1 {
font-size: 2.0em;
margin: 0;
padding: 15px 5px 0;
}
.site-title h1 a {
display: block;
text-decoration: none;
color: #000;
}[/code]

今回は以上のように設定しました。
すこし微調整が必要になると思いますので、数値を変更してみたりしてください。

スマホ用のメニューのデザイン

スマホ用のメニューを作成していきます。

[code]
/*スマホ用のメニューボタン*/
.header-inner {
position: relative;
}

#navbutton {
position: absolute;
top: 50%;
right: 10px;
padding: 8px 12px;
cursor: pointer;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: solid 1px #aaa;
border-radius: 5px;
background-color: #fff;
}

#navbutton:hover {
background-color: #ddd;
}

#navbutton:focus {
outline: none;
}

#navbutton i {
font-size: 2em;
color: #333;
}

/*ヘッダーナビ*/
#header-nav {
display: none;
}

.header-nav {
padding-left: 10px;
}

.header-nav ul {
margin: 0;
padding: 0;
list-style: none;
}

.header-nav li a:before {
content: "\f0da";
font-family: 'Font Awesome 5 Free';
color: #555;
font-size: 0.9em;
padding-right: 3px;
}

.header-nav li a {
display: block;
padding: 15px 5px;
color: #000;
font-weight: bold;
font-size: 1em;
text-decoration: none;
}

.header-nav li a:hover {
opacity: 0.8;
}
[/code]

ナビボタンを動かす

ナビボタンを使用するときはjavascriptを使って操作します。

「js」フォルダというものを作成しその中に「navbutton.js」というファイルを作成しましょう。

navbutton.js[code]
jQuery(function() {
jQuery("#navbutton").click(function() {
jQuery("#header-nav").slideToggle();
});
});
[/code]

.slideToggleというのがナビゲーションを動かすためのコードです。

functions.phpにも追加

jsファイルを読み込むためのコードもfuncitons.phpに記入します。

functions.php[code]//メニューボタンjs呼び出し

function navbutton_scripts(){
wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/js/navbutton.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );

[/code]

これを加えることでメニューバーの動きがつきます。

funciton nav~　はあくまでも関数部分なので、そこを使用する宣言が必要です。
wp_enqueue_scriptを動作させるために最後に『add_action(～』の記述を最後に入れましょう。

PC用のメニューのデザイン

今度はPC用のメニューデザインを作成していきましょう。

[code]/*ヘッダーメニューPC閲覧時*/
@media (min-width: 768px) {
#header-nav {
display: block!important;
}
.header-nav {
max-width: 1200px;
margin: 0 auto;
padding:0 10px;
box-sizing: border-box;
}
.header-nav ul:after {
display: block;
clear: both;
content: '';
}
.header-nav li {
display: inline-block;
width: auto;
}
.header-nav li a {
font-size: 1.1em;
padding: 5px 10px;
}
#navbutton {
display: none;　/*スマホ用のボタンを非表示*/
}
}[/code]

フッターの作成

ヘッダーを作成したので、今度はフッター部分を作成いたします。

まず、画像のように「メニュー」の「フッターナビゲーション」に「✓」を入れておきましょう。

コピーライトを追加

footer.phpのfooter-innerクラスの中に以下を追加しましょう。

[code]<div class="footer-nav-area">

<?php wp_nav_menu( array(

'theme_location' => 'footer-nav',

'container' => 'nav',

'container_class' => 'footer-nav',

'container_id' => 'footer-nav',

'fallback_cb' => ''

) ); ?>　//ナビゲーション

</div>

</div>

[/code]

【スマホ】フッターメニューのCSS部分

これからデザイン部分を作成していきます。
※一時設定で使った「footerとfooter-inner」のCSSの設定を削除しておきます。
【削除後のstyle.css】

[code]/*確認用に一時記述----------*/

.contents, #sidebar {height: 800px; }

.container {background-color: #9db2ea; }

.contents {background-color: #a5e2ff; }

#sidebar{background-color: #aefffc; }

/*------------------------*/[/code]

以下をstyle.cssに追加します。

[code]/*------フッター------*/
footer {
background-color: #23282d;
}
.footer-inner{
background-color: #23282d;
}
/*フッターメニュー*/
.footer-nav {
margin-bottom: 20px;
}
.footer-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav ul:after {
display: block;
clear: both;
content: '';
}
.footer-nav li {
float: left;
width: 50%;
text-align: center;
}
.footer-nav li a {
font-size: .9em;
display: block;
padding: 10px 5px;
text-decoration: none;
color: #fff;
}
.footer-nav li a:hover {
opacity: .6;
}

/*コピーライト*/
.copyright p {
font-size: .9em;
margin: 0;
text-align: center;
color: #fff;
}
[/code]

以上のようになります。

【PC】フッターメニューのcss部分

次にPC用のフッターメニューのCSSです

[code]
/*PC用フッターメニュー*/
.footer-nav li {
width: auto;
text-align: left;
}
.footer-nav li a {
font-size: 1em;
padding: 10px 20px;
}
/*コピーライト*/
.copyright p {
text-align: center; /*right でも大丈夫です*/
}
[/code]

サイドバーでウィジェット

サイドバーウィジェットを追加するためにfunctions.phpに以下を追加します。

[code]

//サイドバーにウィジェット追加

function widgetarea_init() {

register_sidebar(array(

'name'=>’testのサイドバー',

'id' => 'side-widget',

'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',

'after_widget'=>'</div>',

'before_title' => '<h4 class="sidebar-title">',

'after_title' => '</h4>'

));

}

add_action( 'widgets_init', 'widgetarea_init' );

[/code]

配列の中を整理しますと、

[box03 title="register_sidebar(array())"]
‘name’：ウィジェット内に表示されます
'id' ：ウィジェットのIDをつけます
'before_widget'：ウィジェット前につける要素
'after_widget’：ウィジェット後につける要素
'before_title' ：ウィジェット内のタイトルの前につける要素
'after_title'：ウィジェット内のタイトルの後につける要素
[/box03]

コードを更新したあとに「外観」の中に「ウィジェット」が追加されているのが確認できればOKです。

そして、サイドバーのコンテンツを追加していきましょう。

今回は、画像のように「最近の投稿」を追加しました。

最後にサイドバーをサイトに表示するためにsidebar.phpに以下を記述します。

sidebar.php

[code]

<?php dynamic_sidebar( 'side-widget' ); ?>

</div>

</aside>

[/code]

dynamic_sidebarについて

[code]パラメータ
$number
（整数/文字列）（オプション）サイドバーの名前または ID。
初期値： 1
[/code]

サイトを確認する

サイトの確認をすると、サイドバーに先程追加したコンテンツが追加されていればオッケーです。

サイドバーでウィジェットのCSS作成

※一時設定してあるsidebarとcontainerのCSSを削除しておきましょう。

style.css[code]/*------サイドバー------*/
.sidebar-wrapper {
margin-bottom: 1.8em;
padding: 10px;
}
.sidebar-wrapper h4 { /*------タイトル部分------*/
font-size: 1.2em;
margin-top: 0;
margin-bottom: 10px;
padding: 7px 10px;
color: #fff;
background-color: #464646;
}
[/code]

変更したら確認してみましょう

以下のようにスタイルが反映されていたらオッケーです。

次にワードプレスのウィジェットにスタイルを追加します。(任意)

[code]/*デフォルトウィジェット*/
.widget_recent_entries ul, .widget_meta ul, .widget_recent_comments ul, .widget_pages ul, .widget_meta ul, .widget_categories ul, .widget_archive ul, .widget_nav_menu ul {
padding: 0;
list-style: none;
}
.widget_recent_entries li, .widget_meta li, .widget_recent_comments li, .widget_pages li, .widget_meta li, .widget_categories li, .widget_archive li, .widget_nav_menu li {
position: relative;
padding: 10px;
}
.widget_recent_entries li, .widget_nav_menu li {
padding-left: 25px;
}
.widget_recent_entries a, .widget_meta a, .widget_recent_comments a, .widget_pages a, .widget_meta a, .widget_categories a, .widget_archive a, .widget_nav_menu a {
text-decoration: none;
color: #333;
}
.widget_recent_entries a:hover, .widget_meta a:hover, .widget_recent_comments a:hover, .widget_pages a:hover, .widget_meta a:hover, .widget_categories a:hover, .widget_archive a:hover, .widget_nav_menu a:hover {
opacity: .6;
}
/*カテゴリウィジェット*/
.widget_categories li {
display: inline-block;
margin: 2px;
padding: 2px 10px;
white-space: nowrap;
border-radius: 3px;
background-color: #777;
}
.widget_categories li:before {
font-family: 'Font Awesome 5 Free';
font-size: .8em;
font-weight: bold;
padding-right: 2px;
content: '\f02b';
color: #fff;
}
.widget_categories li a {
font-size: .8em;
color: #fff;
}
/*タグウィジェット*/
.tagcloud a {
font-size: .8em !important;
line-height: 2.5em;
margin: 2.5px;
padding: 2px 15px;
white-space: nowrap;
text-decoration: none;
color: #333;
border: 1px solid #333;
border-radius: 3px;
}
/*新着ウィジェット*/
.widget_recent_entries li:before {
font-family: 'Font Awesome 5 Free';
font-weight: bold;
position: absolute;
left: 5px;
content: '\f303';
color: #464646;
}
/*メニューウィジェット*/
.widget_nav_menu li:before {
font-family: 'Font Awesome 5 Free';
font-weight: bold;
position: absolute;
left: 5px;
content: '\f0da';
color: #464646;
}
/*カレンダーウィジェット*/
#wp-calendar {
width: 100%;
}
#wp-calendar tbody {
text-align: center;
}
[/code]

ウィジェットをデザインしてみたほうがきれいに見えるので、

ここを編集しておくのがいいでしょう。

自由に変更ができるので、自分の好みに変更しておきましょう。

index.phpの編集

まず、編集する前にループについて解説しておきます。

[box03 title="WordPressのループとは？"]
ループは2種類ある

メインループ：WordPressで設定した情報を自動で表示する方法

サブループ：こちらで条件分岐をして表示を変えることで出力する情報を変える方法

形式として「WP_Query、get_posts、query_posts」がある。
[/box03]

index.phpを編集することでTOPページに記事一覧が表示されます。

以下のように編集いたします

index.php

[code]<div class="contents">

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

<?php if(has_post_thumbnail() ): ?>

<?php the_post_thumbnail('medium'); ?>

<?php else: ?>

<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.jpg" alt="no-img"/>

<?php endif; ?>

<?php echo get_the_date(); ?>

</time>

</span>

<?php if(!is_category()): ?>

<?php if( has_category()): ?>

<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>

</span>

<?php endif; ?>

<?php the_excerpt(); ?>

</div>

</a>

</article>

<?php endwhile; endif; ?>

</div>

[/code]

the_post_thumbnail()のmediumはサイズの調整が可能です。

「thumbnail、medium、large、full、空欄」のどれかに設定します。

【PC】index.phpのCSS部分編集

次にCSS部分になります。

style.css

[code]
.kiji-list {
margin: 0 0 15px;
border: solid 1px #ddd;
background-color: #fff;
}
.kiji-list a {
display: block;
padding: 20px;
text-decoration: none;
color: #000;
}
.kiji-list a:after {
display: block;
clear: both;
content: '';
}
.kiji-list a:hover {
background-color: #eee;
}
.kiji-list img {
float: left;
width: 220px;
height: 150px;
object-fit: cover;
}
.kiji-list .text {
width: auto;
margin-left: 250px;
}
.kiji-list h2 {
font-size: 1.05em;
line-height: 1.4;
margin-top: 0;
margin-bottom: 5px;
}
.kiji-date {
font-size: .8em;
margin-bottom: 8px;
color: #666;
}
.cat-data {
font-size: .6em;
padding: 3px 5px;
text-align: center;
white-space: nowrap;
color: #fff;
border-radius: 3px;
background-color: #464646;
}
.kiji-list p {
font-size: .8em;
margin: 10px 0 0;
}
[/code]

【スマホ】index.phpのCSS部分編集

スマホ部分に反映させるため適応範囲を599pxまでにする。

style.css
[code]
@media (max-width: 599px) {
.kiji-list a {
padding: 10px;
}
.kiji-list img {
width: 100px;
height: 80px;
}
.kiji-list .text {
margin-left: 120px;
}
.kiji-list h2 {
font-size: .95em;
}
.kiji-date {
margin-bottom: 0;
}
.kiji-list p {
visibility: hidden;
height: 0;
}
}
[/code]

ページネーションの追加

index.phpのループの終わりに追加

index.php
[code]〜

</article>

<?php endwhile; endif; ?>

<?php echo paginate_links( array(

'type' => 'list',

'mid_size' => '1',

'prev_text' => '«',

'next_text' => '»'

) ); ?>

</div>

[/code]

ページネーションの最初と最後の表記を指定。

[box04 title="「&laquo」と「&raquo」とは？"]

特殊文字と言われるものでして、「&」だったり、「≤」という記号をそのまま表示ができないものに使います。今回は以下の通り。

&laquo「<<」

&raquo「>>」
[/box04]

【PC・スマホ】ページネーションのデザイン

以下を追加します

style.css
[code].pagination {
margin: 40px 0 30px;
text-align: center;
}
.pagination ul {
margin: 0;
padding: 0;
list-style: none;
}
.pagination li {
display: inline-block;
width: auto;
}
.pagination li a, .pagination li > span {
font-size: .9em;
display: block;
width: 30px;
margin: 0 1px;
padding: 5px 0;
text-decoration: none;
color: #000;
border: solid 1px #ccc;
border-radius: 3px;
}
.pagination li > span {
color: #fff;
background-color: #464646;
}
.pagination li a:hover {
color: #fff;
background-color: #464646;
}
.pagination li .dots {
width: 15px;
padding: 0;
color: #000;
border-color: transparent;
background-color: transparent;
}[/code]

カテゴリーやタグをタイトルに表示する

ループの直前に追加する

index.php[code]

<?php if(is_category() || is_tag()): ?>

<h1><?php single_cat_title() ?>の記事一覧</h1>

<?php elseif(is_year()): ?>

<h1><?php the_time("Y年") ?>の記事一覧</h1>

<?php elseif(is_month()): ?>

<h1><?php the_time("Y年m月") ?>の記事一覧</h1>

<?php endif; ?>

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

〜

[/code]

【PC・スマホ】カテゴリーやタグをタイトルのCSSを修正する

style.css[code]

.contents > h1 {

font-size: 1.5em;

margin: 0 0 20px;

}

@media (max-width: 599px) {

.contents > h1 {

font-size: 1.3em;

}

[/code]

そこまで大きく変わらないが、スマホで見たときのタイトルサイズを調整します。

今日はここまでにします。

今日使ったこと

[box03 title="WordPressの関数"]
・bloginfo( ‘　' );→表示しているサイトのタイトルを呼び出す
・register_sidebar(array())→サイドバーの要素を指定する
[/box03]

参考サイト:
https://plusers.net/