PROGRAMMING

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


Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

こんにちは。もんしょー(@sima199407)です。

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

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

今回の流れ

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

メニューを作成

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

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

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

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

タイトルの要素を作成

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

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

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

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

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

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

【コードイメージ】

ナビメニューを追加する

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

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”>の下に追加

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

CSSの設定

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

削除後のstyle.css

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

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

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

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

ナビボタンを動かす

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

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

navbutton.js

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

functions.phpにも追加

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

functions.php

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

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

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

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

フッターの作成

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

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

コピーライトを追加

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

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

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

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

以上のようになります。

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

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

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

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

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

register_sidebar(array())

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

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

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

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

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

sidebar.php

dynamic_sidebarについて

サイトを確認する

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

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

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

style.css

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

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

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

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

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

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

index.phpの編集

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

WordPressのループとは?

ループは2種類ある

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

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

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

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

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

index.php

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

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

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

次にCSS部分になります。

style.css

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

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

style.css

ページネーションの追加

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

index.php

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

「&laquo」と「&raquo」とは?

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

&laquo「<<」

&raquo「>>」

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

以下を追加します

style.css

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

ループの直前に追加する

index.php

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

 

style.css

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

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

今日使ったこと

WordPressの関数

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

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

RELATED POST