NO IMAGE

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

  • 2018年11月15日
  • 2018年11月16日
  • 未分類
  • 734view

先程の記事の続き。

作業しながら記録。

まずはブランクテーマの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

 

【Bootstrap v4】ナビバーを作る

 

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

 

 

 

 

NO IMAGE
最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「   」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG