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タグの内に収めればオッケーです。
こちらはWordPressのメニュー機能を呼び出すときに使えます。
今回使用したいのは以下のもの
・theme_location(初期値：なし)→テーマの中で使われる位置
・container(初期値：div)→menuを何で囲むか、使えるタグは、 div、nav
・container_class(初期値：menu-{メニューのスラッグ}-container)→ containerのタグのクラス名
・container_id(初期値：なし)→ containerのタグのID名
・fallback_cb(初期値：wp_page_menu)→メニューが表示されていない場合の値
参照はこちら
スマホ用ボタンを追加する
header.phpの
fas fa-list-ulはFontAwesomeで設定してあります。
CSSの設定
※【その１】で使った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】
