/WordPress(応用)/Bootstrapのナビゲーション・バー機能を使う2020年02月03日Bootstrapのナビゲーション・バー機能を使うBootstrapのナビゲーション・バー機能とは、下記を行ってくれるコンポーネントです。1スマホはメニューを非表示にしON/OFFボタンを表示する。メニュをONにした時はメニューを縦に並べる。2タブレットやパソコンはメニューを横に並べる。ここではこの機能の使い方を解説しています。1.ナビゲーション・バーの基本形ナビゲーション・バーの基本形は下記になります。navbar-inverse”>~</nav>がメニュの全体枠で、この中に表示する項目を並べる。data-toggle=”collapse”を指定する。これがコラップス(開閉)を可能にする指定になります。data-target=”#navbarEexample7′′は開閉するメニュを指定しています。navbar-collapse”を指定する。これが開閉されるメニュのクラスです。id=”navbarEexample7′′は開閉するボタンを指しています。※4.上記では表示する項目がnavbar-headerとメニュだけになっているが、この間に色々な項目を入れても良い。上記HTMLを実行すると下記の様になります。<PCで表示した場合><スマホで表示した場合>メモ上記のナビゲーション・バーをもっと使い易くする為には下記カスタマイズが必要になります。1メニュ表示のON/OFFボタンを関数にして、プログラムを簡単にする。2メニュはWordPressのメニュを呼び出せる様にする。引数を持つ様な複雑な関数はfunctions.phpを2つに分けて管理した方が維持メンテが用意になります。get_template_part('func/my_navbar_button');※1.上記はfuncフォルダの中にあるmy_navbar_button.phpを取り込め!という命令です。2-2.func¥my_navbar_button.phpに記述するプログラムは下記になります。}?>※1.スタイルも併せて関数化する事により、関数の変更を簡単にしています。※2.引数($id)は開閉するメニュのID名です。※3.赤字の所がnavbarとして機能させる為のクラス名等です。上記関数をCALLすると、下記の様なnavbarボタンが表示されます。上記関数を使ったナビゲーション・バーの基本形は下記になります。?></div></nav>※1.my_navbar_button(‘名前’)と開くメニュのID名を一致させます。上記では#navbar-menuとid=”navbar-menu”です。※2.wp_nav_menuで指定しているパラメータは下記になります。‘primary’‘theme_location’は表示するメニュの名前です。TwentyTwelveではメインメニュ名がprimaryになっています。false上記設定はul要素をdivでラップするのをやめます。‘<ul>%3$s</ul>’上記設定はUL要素に余分なIDが付くのをやめます。※4.タイトルやその他の部品の所は何行書いても問題ありません。下図はHPタイトル、ディスクリプション、検索機能を入れた例です。メモ以上でこのドキュメントの説明は完了です。関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。このサイトには、Google広告が掲載されています。この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。<関連記事一覧>固定ページをデザインするこのコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。トップページはfront-page.phpを利用しています。imagesで画像を圧縮する画像が多いサイトを作成するとどうしても表示スピードが遅くなります。この対策の一つとして画像を圧縮する方法があります。[...]見出し、本文、URL設定と使い方このドキュメントではTinyMCEでビジュアルな見出しの作り方。改行と段落替えを考慮した本文の設定方法。通常のURLリンクと文書内URLリンクの設定と使い方を解説しています。整形済みテキストと引用の設定と使い方ここでは整形済みテキストと引用の設定と使い方を解説します。整形済みテキストのポイントは入力ミスを起こさせない為の設定で、引用の場合はデフォルトの引用よりもっとビジュアルな引用BOXを作成しています。TinyMCEのeditor-style.cssの制限と回避方法TinyMCEの仕様は親テーマのeditor-style.css➡子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。TinyMCEで色々なタイプのBOXを作るメモBOXは通常のCSSを使って作成したBOXです。ここではFlexboxの機能を利用して、横に1個や2個並ぶBOXで、枠線を付けたり、リンク対応をしたBOXを作成できるBOXの作り方を解説します。TinyMCEで綺麗な表を作るPCで表を作成し、それをタブレットやスマホで表示すると表が綺麗に収まりません。基本機能だけでは表の枠線や色を綺麗に表示できません。よってここではこれらを解決する為にBootstrap機能も併用して綺麗な表を作成する方法を解説しています。SynologyのWordPressのURLをSearch-Replace-DBで変更するSynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。表示デバイスと画面サイズの両方を使った判断方法PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。TinyMCEに自作のモーダルウィンドウを実装するBootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。