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

sima@ 2019年4月1日

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

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

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

今回の流れ
今日使ったこと

今回の流れ

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

メニューを作成

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

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

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

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

タイトルの要素を作成

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

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

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


<!--タイトルが文字列-->

<div class="site-title">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo( 'name' ); ?>
</a></h1>
</div>

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


<!--タイトルが画像-->

<div class="site-title">
<h1><a href="<?php echo home_url(); ?>">
<img src="アップロードした画像へのURL" alt="<?php bloginfo( 'name' ); ?>"/>
</a></h1>
</div>

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

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

【コードイメージ】


<div class="header-inner">



<!--タイトルを文字にする場合-->
<div class="site-title">

  <h1><a href="<?php echo home_url(); ?>">

    <?php bloginfo( 'name' ); ?>
  </a></h1>
</div>

</div>

ナビメニューを追加する

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

~

</div>



<!--ヘッダーメニュー-->
<?php wp_nav_menu( array(
      'theme_location' => 'header-nav',
      'container' => 'nav',
      'container_class' => 'header-nav',
      'container_id' => 'header-nav',
      'fallback_cb' => ''
) ); ?>
</header>

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

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)→メニューが表示されていない場合の値

参照はこちら

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

header.phpの

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


~
<!--タイトルを文字にする場合-->
<div class="site-title">




<!--スマホ用メニューボタン-->
<button type="button" id="navbutton">
<i class="fas fa-list-ul"></i>
</button>




  <h1><a href="<?php echo home_url(); ?>”>
~

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

CSSの設定

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

削除後のstyle.css


/*確認用に一時記述----------*/
.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; }
/*------------------------*/

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

*タイトルを画像にする場合*/
.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;
}

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

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

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


/*スマホ用のメニューボタン*/
.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;
}

ナビボタンを動かす

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

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

navbutton.js


jQuery(function() {
jQuery("#navbutton").click(function() {
jQuery("#header-nav").slideToggle();
});
});

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

functions.phpにも追加

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

functions.php

//メニューボタン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' );

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

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

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

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

/*ヘッダーメニュー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;　/*スマホ用のボタンを非表示*/
}
}

フッターの作成

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

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

コピーライトを追加

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

<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 class="copyright">
<p>copyright ©<?php bloginfo( 'name' ); ?> All Rights Reserved.</p>　//コピーライト部分
</div>

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

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

/*確認用に一時記述----------*/

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




.container {background-color: #9db2ea; }
.contents {background-color: #a5e2ff; }
#sidebar{background-color: #aefffc; }

/*------------------------*/

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

/*------フッター------*/
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;
}

以上のようになります。

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

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


/*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 でも大丈夫です*/
}

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

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


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

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' );

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

register_sidebar(array())

‘name’：ウィジェット内に表示されます
‘id’ ：ウィジェットのIDをつけます
‘before_widget’：ウィジェット前につける要素
‘after_widget’：ウィジェット後につける要素
‘before_title’ ：ウィジェット内のタイトルの前につける要素
‘after_title’：ウィジェット内のタイトルの後につける要素

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

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

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

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

sidebar.php



<aside id="sidebar">
<div class="sidebar-inner”>
 <?php dynamic_sidebar( 'side-widget' ); ?>
</div>
</aside>

dynamic_sidebarについて

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

サイトを確認する

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

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

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

style.css

/*------サイドバー------*/
.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;
}

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

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

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

/*デフォルトウィジェット*/
.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;
}

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

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

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

index.phpの編集

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

WordPressのループとは？

ループは2種類ある

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

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

形式として「WP_Query、get_posts、query_posts」がある。

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

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

index.php

<div class="contents">
   <?php if (have_posts()): while(have_posts()): the_post(); ?>
     <article <?php post_class( 'kiji-list'); ?>>
        <a href="<?php the_permalink(); ?>">
          <!-- 画像を追加 -->
          <?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; ?>
          <div class="text">
            <!-- タイトル -->
            <h2><?php the_title(); ?></h2>
            <!-- 投稿日 -->
            <span class="kiji-date">
              <i class="fas fa-pencil-alt"></i>
              <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
                <?php echo get_the_date(); ?>
              </time>
            </span>
            <!-- カテゴリー -->
            <?php if(!is_category()): ?>
              <?php if( has_category()): ?>
                <span class="cat-data">
                  <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
                </span>
              <?php endif; ?>
            <?php endif; ?>
            <!-- 抜粋 -->
            <?php the_excerpt(); ?>
          </div>
        </a>
      </article>
      <?php endwhile; endif; ?> <!-- ループ終わり -->
  </div>

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

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

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

次にCSS部分になります。

style.css


.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;
}

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

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

style.css


@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;
}
}

ページネーションの追加

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

index.php

〜
</article>
      <?php endwhile; endif; ?> <!-- ループ終わり -->


<!-- ページネーション -->

      <div class="pagination">

<?php echo paginate_links( array(
'type' => 'list',
'mid_size' => '1',
'prev_text' => '&laquo;',
'next_text' => '&raquo;'
) ); ?>
</div>

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

「&laquo」と「&raquo」とは？

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

&laquo「<<」

&raquo「>>」

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

以下を追加します

style.css

.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;
}

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

ループの直前に追加する

index.php


<!-- カテゴリー表示 -->
    <?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(); ?>
       <article <?php post_class( 'kiji-list'); ?>>
〜

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

style.css


.contents > h1 {

font-size: 1.5em;
margin: 0 0 20px;
}

@media (max-width: 599px) {
.contents > h1 {
font-size: 1.3em;
}
}

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

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

今日使ったこと

WordPressの関数

・bloginfo( ‘　’ );→表示しているサイトのタイトルを呼び出す
・register_sidebar(array())→サイドバーの要素を指定する

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

プログラミング

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

今回の流れ

メニューを作成

タイトルの要素を作成

ナビメニューを追加する

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

CSSの設定

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

ナビボタンを動かす

functions.phpにも追加

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

フッターの作成

コピーライトを追加

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

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

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

サイトを確認する

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

index.phpの編集

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

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

ページネーションの追加

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

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

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

今日使ったこと

私が実践した、正しい部活の辞め方を公開。【心配無用です】

カフェやコワーキングよりおすすめ！「快活クラブ」のオープンシートがいい！

高校編入経験者が語る、試験勉強と入学した後の話。

【実体験】アレルギー性鼻炎のレーザー治療をしました【保険適用】

エンジニアの私がポートフォリオサイトを作成した理由【スキルの見える化】

今回の流れ

メニューを作成

タイトルの要素を作成

ナビメニューを追加する

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

CSSの設定

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

ナビボタンを動かす

functions.phpにも追加

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

フッターの作成

コピーライトを追加

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

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

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

サイトを確認する

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

index.phpの編集

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

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

ページネーションの追加

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

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

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

今日使ったこと

プログラマーを目指す理由は2種類ある【文系出身が解説】

WordPressで画像をふわっと表示する「ScrollReveal」を導入する方法【web制作にも】

初めてのプログラミング学習で挫折したときに考えるべきこと【当たり前】

休学におすすめ！英語やってからプログラミングするべき理由

文系大学生だけど、派遣エンジニアになって時給が２０００円になった話。

【実体験】エンジニアが最効率で学ぶには実務に入ることがいい

私が実践した、正しい部活の辞め方を公開。【心配無用です】

カフェやコワーキングよりおすすめ！「快活クラブ」のオープンシートがいい！

高校編入経験者が語る、試験勉強と入学した後の話。

【実体験】アレルギー性鼻炎のレーザー治療をしました【保険適用】

エンジニアの私がポートフォリオサイトを作成した理由【スキルの見える化】