HOME  /WordPress(応用)
 /固定ページをデザインする
2020年02月03日

固定ページをデザインする

このサイトは固定ページは、1つのトップページと一般固定ページから構成させています。

両者とも画面デザインは同じですが、一般固定ページは先頭に更新日付を表示し、コンテンツの新鮮度を訪問者に知らせる方式を取っています。

尚、表示プログラムは下記になります。

トップページ :front-page.php

一般固定ページ:page.php

1.固定ページのデザインとプログラム

固定ページのデザインは下記の様になっています。

上図のパンくずの下からが本文領域です。

本文領域は下記から構成されています。

①灰色の背景(id=’background’)がある。

②この背景の上に白い紙をイメージしたドキュメントコンテナ(id=’page-contener’)がある。

③このコンテナの中ににコンテンツ(id=’page-contener-data’)が書かれている。

page.phpとfront-page.phpの違いは下記コラップスを開閉して確認してください。

<!--固定ページ(page.php)-->

<?php get_header();?>

<div id='background'>
 <div id='page-contener'>
  <div id='page-contener-data'>
   <?php while ( have_posts() ) : the_post(); ?>
				<div> <span class="glyphicon glyphicon-time" aria-hidden="true"></span>【<?php  the_modified_date('Y年m月d日'); ?>】</div>
				<div class='contents'>
					<?php the_content(); ?>
				</div>
			<?php endwhile;?>
  </div>
  <?php edit_post_link('編集','<','>',''); ?>
 </div>
</div>
		
<?php get_footer();?>

※1.上記の赤字の所が背景やコンテナ及びコンテナの中のデータ部分です。

※2.青字の部分が固定ページの中のデータを読み出す部分になります。
尚、<div class=’contents’>を指定する事によりビジュアルエディタのCSSを適用させています。

※3.ピンクの部分が固定ページの表示画面から編集画面に移行する関数です。

 

<!-- トップページ(front-page.php) -->

<?php get_header();?>

<div id='background'>
	<div id='page-contener'>
		<div id='page-contener-data'>
   <?php while ( have_posts() ) : the_post(); ?>
				<div class='contents'>
					<?php the_content(); ?>
				</div>
			<?php endwhile;?>
  </div>
  <?php edit_post_link('編集','<','>',''); ?>
	</div>
</div>
		
<?php get_footer();?>

※1.page.phpと異なる場所は、更新日付を表示する部分だけです。

2.CSSでデバイス対応処理を行う

ヘッダの時は下記のデバイスデザインを行いました。

①PC画面は左右8%の余白

②タブレット画面は左右2%の余白

③スマホ画面は画面幅一杯に表示

そこで固定ページも上記と同様な形でデザインします。

/*****************************************/
/* コンテンツ設定                        */
/*****************************************/
#background{
	display:flex;
	background:#f7f7f7;}
/**** 固定ページコンテナの設定 ************/
/* PCの場合は左右に8%の余白 */
#page-contener{
	margin:0 8%;                
	margin-top:2%;
	border:1px solid #c0c0c0;
	box-shadow:1px 1px 10px #c0c0c0;
	background:#fff;}
#page-contener-data{margin:5%}	
/* タブレットの場合は左右に2%の余白 */
@media screen and (min-width:768px) and (max-width:991px){ 
 #page-contener{
	 margin:0 2%;
	 margin-top:2%;}
}
/* スマホの場合は画面枠一杯 */
@media screen and (max-width:767px){
	#page-contener{margin:0;} 
	#page-contener-data{margin:2%;}
}

※1.背景(#background)は灰色でdisplay:flexを指定しています。
display:flexは投稿ページで投稿文書とサイドバーを1行に並べる為の処置です。

※2.ページコンテナ(#page-contener)は、デバイスによって左右のマージンを変更しています。

3.その他の情報

WordPressのホームページの優先順位は下記になります。

①front-page.php
この名前のプログラムがあると総てに優先されます。

②管理者画面の表示設定の「フロントページ」で指定したページ
front-page.phpが無い時にここで指定したページのテンプレートが使われます。

③home.php
上記の①②が無い時に使われるプログラムです。

④index.php
上記の①②③が無い時に使われるプログラムです。

 メモ

このサイトはfront-page.php方式を採用しています。

よって、このサイトのURLがクリックされた時に動くプログラムはfront-page.phpです。

しかしこのサイトのホームページはコンテンツを表示したいので、管理者画面の表示設定の「フロントページ」で指定したページをfront-page.phpで表示する形にしています。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

自作のページネーションを作成する方法を解説しています。これはWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]