/WordPress(応用)/リストページをデザインする2020年02月26日リストページをデザインするリストページは複数のドキュメントを一覧リストで表示するページです。1ページに何個表示するか?は、「設定の表示設定」で指定します。このリストページには下記の物があります。検索結果が0の時のエラー処理が必要1.プログラム比較デザインの基本は投稿ページと同じなので、これを基準に解説します。single.phpcategory.phpcategory.phpsearch.php投稿ページプログラムは下記になります。?>※1.タイトル(the_title())だけを表示しています。※2.記事全体(the_content())を表示しています。カテゴリとアーカイブのプログラム下記になります。?>※1.タイトル(the_title())にリンク先(the_permalink())を追加してます。※2.記事は複数あるので個々の記事を「class=’list-box’」で囲み、記事の抜粋(the_excerpt())をここに表示しています。※3.記事一覧の前後にページナビ(my_pagenavi($wp_query))を表示しています。ぺージナビの詳細は自作のページネーションを作成するを参照してください。検索結果のプログラムは下記になります。<p>上記で検索した結果、対象ドキュメントはありませんでした。<p>他のワードで再検索して下さい。?>※1.記事リストのループの前に「if(have_posts())」で検索結果記事の有無をチェックしています。※2.検索結果の記事が無い場合はエラーメッセージを出力しています。2.CSSでデバイス対応処理を行うここでは投稿ページのデザインがそのまま採用されているので、「class=’list-box’」の所だけ設定している。h1{font-size:20px;font-size:1.25rem;color:#400fff;font-weight:bold;}※1.idは1ページの中に1回しか使えないのがルールなので「list-box」をクラスで指定しています。※2.ドキュメントタイトルは一覧表示の時は大きすぎるので、少し小さめのサイズに変更しています。メモ以上でこのドキュメントの説明は完了です。関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。このサイトには、Google広告が掲載されています。この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。<関連記事一覧>SynologyでWebに80/443以外のポート番号を使う方法SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。固定ページをデザインするこのコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。トップページはfront-page.phpを利用しています。TinyMCEで色々なタイプのBOXを作るメモBOXは通常のCSSを使って作成したBOXです。ここではFlexboxの機能を利用して、横に1個や2個並ぶBOXで、枠線を付けたり、リンク対応をしたBOXを作成できるBOXの作り方を解説します。Flexboxを使ったヘッダの作成方法Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。Flexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。フッタを作成するこのコンテンツはこのサイトのフッタページのデザインを解説した物です。表示デバイスを取得する方法WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。これは画面サイズではありません。Flexboxを使った画面コントロールFlexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。ビジュアルエディタとHTTP表示を一致させる方法ビジュアルエディタの表示と、HTTP表示を一致させる為には両方のCSSを合わせる必要があります。ここで注意しなければならない点は下記になります。1ビジュアルエディタのCSS「editor.style.css」は、コンテンツエリアだけのCSSである。2一方、HTTP表示のCSS「style.css」は、コンテンツエリア以外のヘッダーやページにも使うCSSである。よって両方のCSSを一致させるとは「editor.style.css」の定義を「style.cssのコンテンツ領域」に取り込む事を意味しています。Bootstrapの導入方法と設定Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。独自のメール送信プログラムを作成するwordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。