”のすけ”のブログです2018-09-25WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインするWordpressこんにちは、のすけです。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。そこで巷ではCSSフレームワークというものが用意されています。有名な例では「Bootstrap」「Foundation」などがあります。今回は「Bootstrap」を導入する例を紹介したいと思います。バージョンは最新のBootstrap4を扱います。Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、4になっていくらか軽減されていると思います。Bootstrapを読み込むヘッダーを作るナビゲーションメニューをつけるli要素とaタグにクラスを付けるためにfunctions.phpに追記まとめBootstrapを読み込む今回はheader.phpに書き込む手法でいきたいと思います。読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。crossorigin="anonymous"></script>そのほか、独自のCSSの読み込み方法を利用して、functions.phpで読み込む方法は、こちらの記事で紹介しています。hollywis.hatenablog.comテーマフォルダ内にCSSやJSを置く方法もありますが、ルートフォルダ直下にassetsフォルダを作ってそこに配置していきます。ヘッダーを作るheader.phpを編集していきます。オリジナルで作った最小テーマである「anothersky」の分割バージョンを使っていきます。class="wrap">とてもシンプルなheader.phpです。本当に最低限の記述しかありません。ここにBootstrapを適用していきます。CSSフレームワークにはだいたいヘッダー用のデザインがあらかじめ用意されています。ナビゲーションメニューをつけるWordpressの管理画面から[外観]-[カスタマイズ]をクリックし、次に[メニュー]からmenuという名前でメニューを追加しておきます。ソースコードを見てみると次のような構成になっています。</div></div>containerのclassが「menu-memu-container」、menuのclassが「menu」です。対して、BootstrapのNavbarは次のような形を期待しています。大まかな構成は一緒ですが、クラス名などのズレがあります。</div></nav>そのため、次のようにheader.phpを書き換えていきます。class="wrap">まず、body要素下の最後の2行を残して全て内容を全て削除し、代わりにBootstrapのコードを入れ込みます。次に、Webサイトのタイトルに当たる部分にを埋め込みます。最後にメニューのdiv要素をWordpPressのメニューテンプレートであるwp_nav_menu()に置き換えてきます。その際に、クラスの名前が都合が悪いため次のように初期設定を書き換えます。navbar-collapse'li要素とaタグにクラスを付けるためにfunctions.phpに追記li要素にnav-itemをそして、現在表示しているページにはactiveを、さらにli要素下のaタグにもクラスを付ける必要があるのでfunctions.phpに以下のコードを記述する。$item_output);}active,nav-itemはnav_menu_css_classをフックして、任意のクラスを追加させている。nav-link'はwalker_nav_menu_start_elのフックで、正規表現で特定して追加させています。nav-linkの付け方はこちらを参考にさせていただきました。WEBUTUBUTUまとめ結構面倒ですね。BootstrapにはSass版もあり、そちらを使えばテーマの色を一括で変えるなどもできるのですが、それは次の機会にやってみたいと思います。今回はデフォルトのBootstrap4をCSSとJSファイルそのままで利用していきました。liタグにクラスを付ける方法に、管理画面の外観のカスタマイズで、メニューの項目にそれぞれCSSクラスを記述できるのですが、それだとメニューを追加するたびにいちいちクラスを追加しなくてはいけないため、その手法はやめました。BootstrapとWordPressの使用をすり合わせるためには、headerのテンプレートだけでなく、functions.phpもいじらなくてはいけないため、なかなか難儀な作業です。Tumblr広告を非表示にするもっと読むコメントを書く2018-09-17カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させるWordpressこんにちは、のすけです。「WordPressって言うてもブログでしょ。」いや、違います!!カスタムフィールドがあります!!ということで今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。位置を追加カスタムフィールドを表示させるテンプレートを作るコンテンツをフィールドごとに適切に表示まとめ本文じゃ色々と足りないWordPressにある「投稿」では次のような項目があると思います。タイトル本文カテゴリタグでもこれだけだと正直、記事の投稿くらいにしか使えません。なんて情報の入力項目が欲しいかもしれません。「価格」なんて情報の入力項目が欲しいかもしれません。通常のままだと全部「本文」に入れるしかありません。項目を増やせたらいいのに。カスタムフィールドで!しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。カスタムフィールドとは実はWordPress標準の機能に「カスタムフィールド」と言う設定欄があります。投稿や固定ページの新規作成画面で、表示オプションのカスタムフィールドにチェックを入れると利用できるようになります。投稿や固定ページの編集画面で上の方の「表示オプション」を開くとカスタムフィールドを出せるカスタムフィールドの情報には「名前」と「値」の組み合わせがあり、自由な情報を登録できます!!例えば「住所」の情報を増やしたければ、「名前」に"住所"と入れて、「値」に実際の住所情報を入れます。すると、データベースのwp_postmetaテーブルに「meta_key:名前、meta_value:値」としてデータが保存されます。このカスタムフィールドのデータを利用することで、記事情報から取得したいデータだけを取得して任意の処理ができるようになります。業務システムのように。実はこのカスタムフィールド標準だと、いちいち投稿や固定ページを投稿するたびに項目を追加しなくてはならないためシステムがわからない人が投稿時に使うには現実的ではありません。そこで次の便利なプラグインを使います。Fields」を利用するともう全て解決です。最初から必要な項目は全てセッティングできます。テキストデータだけでなく、画像やファイルをアップロードする項目すら作れます。実際に使ってみましょう使ってみるでは実際にサンプルとして、オンライン教育サイトの講座のページを作ってみたいと思います。Fields」を検索してインストールし有効化させます。カスタム投稿タイプ「kouza」を作ります。UI」で「kouza」を作っておきます。ここでわからないぞ!という方は、こちらの記事を参考にどうぞ。WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。Fields」さんを有効化すると管理画面に「カスタムフィールド」という項目ができているので、「新規追加」を押します。タイトルに「講座のフィールドグループ」と入力して次のフィールドを入力することにします。Map」がオススメです。「このフィールドグループを表示する条件」を、「投稿タイプ」「等しい」「講座」にします。これを設定することで投稿タイプが「講座」の記事を作成時に、上記フィールドが設定できるようになります。位置を追加Settingsの「位置」を「高(タイトルの後)」にしましょう。することで、投稿画面のタイトルのすぐ下にフィールドが表示されるため設定忘れを防げます。カスタム投稿タイプで投稿してみる作成した「講座」から新規追加を押すと編集画面が表示されます。いつもの画面と違って、設定したフィールドが表示されているのがわかります。ここに、実際に値を入れてみるとこうなります。(松下幸之助さんの動画を使わせていただきましたorz)このように、任意の値を設定できるようになり、もはやブログからは脱却できたことが分かるかと思います。実はまだ終わりではありません。このまま記事を「プレビュー」させてみると分かるのですが、フィールドで設定した情報は表示されません。カスタムフィールドを表示させる投稿テンプレートを作る必要があります。カスタムフィールドを表示させるテンプレートを作るでは作っていきます。投稿タイプ「kouza」ですので、single.phpをコピーして「single-kouza.php」を作ります。「タイトル」と「本文」だけが表示されるようになっているテンプレートにカスタムフィールドを表示させる関数を書いていきます。WordPressループの中に次のコードを入れてみましょう。?></div>するとこのような感じで表示されます。カスタムフィールド情報をテキストデータとしてリストで表示するものになります。これで実際に値が入っているのは確認できました。動画のURLをテキストデータで表示されても内容が見れません。PDFファイルに至っては謎のIDだけでした。そのため、ひとつひとつデータを取り出して、コンテンツを適切に表示させていく必要があります。Fields」独自のテンプレートタグが便利ですので、こちらを使っていきます。the_field():指定したフィールドを表示するget_field():指定したフィールドの値を取得するWordPressループの中に次のコードを入れます。?></div>すると、動画は動画に、ファイルはリンクとして適切に表示されました。説明カスタムフィールドの値は必ずしも入っているとは限りません、そのためget_field()を使ってif文で存在するか判別しています。省略していますが実際にはdougaやtext_pdfも存在判別をした方がより安全です。その他のフィールドタイプの例などもACFの公式ページで紹介されていますので、そちらを参考にコードを書くと良いかと思います。www.advancedcustomfields.comまとめ今回はカスタムフィールドを使うことでWordPressをブログ以上のシステムに進化させる方法を紹介しました。Fields」を使うことで、様々なタイプのフィールドを追加させることができるようになりました。カスタム投稿タイプと併用することで、専用の投稿ページ&表示ページを自由に作成することができるため、様々な要望に答えられるシステムを構築することができます。Fields」さん本当に便利ですね!次回は独自のテーマをCSSフレームワークを利用して、それっぽくデザインする方法を紹介したいと思います。(Bootstrapなど)Wordpressこんにちは、のすけです。WordPressを弄っていると、独自のCSSやJavascriptを使って整えたくなってきますよね。そんなCSSやJSを作成して変更する方法を紹介します。[CSS編集]からCSSについては編集できます。テーマのCSS編集この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。プレビューを確認しながら変更できるので便利ではありますその他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。style.cssはテーマ用なので別ファイルで管理したいしかし、問題もあります。このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますしテーマのアップデートで消えてしまったこともあります。テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。)膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSやJavascriptを利用して編集する手法を取りたいと思います。ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。bootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。script」関数を利用して、登録を行います。header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。以下のように、functions.phpの最後の行に追記します。編集する際にはコピーを取って戻せるようにしてください。間違って記述するとサイトが動かなくなります。);``url``にCSSやJavascriptを記述します。絶対に直接書き込むべきではない。