BlankSlateを利用してカスタマイズ その1

先程の記事の続き。

作業しながら記録。

まずはブランクテーマのBlankSlateの内容を確認して、CSSやJSをすっきりと組み込めるかテスト。

BlankSlate

 

まずは不要なヘッダータグを削除

function.php

 

次にBootstrap4の公式セットを読み込み。

wp_enqueue_script()とwp_enqueue_style()はまとめてアクションフックに登録

 

バリデーションを含むページ用意してみる。

もともとバリデーションが動かなかったから……だったが、これで動くか確認。
まずはテンプレートを作り、

Uncaught Error: jQuery.validationEngine rules are not loaded, plz add localization おお?

/js/jquery.validationEngine-ja.js 読んでなかったからか。
怖いから、languagesフォルダに入れておくか。

グリッドを実装

TODO

検索フォーム

まずはトップページ。

index.phpを複製してfront-page.php を作る。

メニューが邪魔

まずメニューが邪魔なので、トップページは管理バーは下に下げておく。

ヘッダー無駄に32pxほど隙間があるので、もう面倒なので、

上に変更

 

 

WordPress で使用中のテンプレートファイル名を管理バーに出しておく
Show Current Template

 

 

ヘッダーとフッターメインはそれぞれcontanierに包む。

front-page.php

ヘッダーを見ると、最後に最後の行に<div id=”container”>とあるfooterまで包んでいるので、これはわかりずらいので、直す。
そして<div id=”wrapper” class=”hfeed”> このhfeedの意味を確認するがあまり意味がないので、これは削除しておく。

まずはヘッダー

 

そしてindex.php

このblankslateは

<?php get_template_part( ‘entry’ ); ?> でentry.phpを読んでいるのか。

じゃ、トップページに出すカードphpを作ろうかと思うが、わざわざ別のファイルすることはないな。

アイキャッチをURLを表示

日付を変更

まずは以下

日付のところ

https://qiita.com/NoxGit/items/eb0904822c0f0fe97650

次に、ヘッダー部分の部分も変更

 

sticky-top 最上部に達すると固定(Sticky top)
fixed-top

高さを変更

navbar高さを変えるより、上に頃を入れるか

bootstrapでnavbar-fixed-topを指定するときはbodyにpaddingが必要


ナビバーが2段にならない。

@https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2-rows

@参考URL

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
https://stackoverrun.com/ja/q/11927480

 

http://lotusboast.website/website/bootstrap/741/

 

https://cccabinet.jpn.org/bootstrap4/utilities/display

 

 

 

 

Follow me!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA