*

ウェッブ制作・パソコン

Width =px

ホーム > WordPress・CMS >
WordPress 開発メモ MENU 

WordPressサイト作成にあたって個人的備忘録

01 PlugIn必須のwp_head()

プラグイン(PlugIn)を利用するためには、「wp-head()」なるものを記述しないと多くのPlugInは正常に動かない。以下のphpをheadから/headの間に記述するが、通常は/headの前。

02 ウィジェット有効化

ウィジェット機能を使うには、「functions.php」なるファイルを作成し、以下のように記述する。

03 アイキャッチ画像・ページ毎にヘッダー画像を変える

1.「functions.php」に以下のように記述

2.ヘッダー画像の表示部分を以下のようにする

3.アイキャッチ画像のアップ
 1)挿入したいページを編集画面で開き、アイキャッチ画像の「アイキャッチ画像を設定」をクリック
 2)「自分のコンピューターからメディアファイルを追加」で、
  「コンピュータ」からでローカルPCの画像アドレスを指定。
 3)配置:中央 サイズ:フルサイズ
 4)「アイキャッチ画像として使用」クリック
 5)「変更を全て保存」をクリック
 6)「アイキャッチ画像設定」のボックスを閉じる
 7)固定ページの「アイキャッチ画像」に所に入れた画像が表示される。

04 条件分岐特定頁出力、複数頁指定

以下は、ヘッダー画像を「特定ページ出力」を使って、他のページと異なるヘッダー画像を表示している。尚、header.phpをファイル名を変えて3個作成して使い分けても良いかも!

ページタイトルの部分は、ページID番号もOKです。

複数頁に同じ処理をしたいとき

05 ログイン出来ない時

06 メニューの作成と表示

1.カスタムメニュー方式(レッスンブック STEP6-4)
  1)カスタムメニューの有効化:「functions.php」ファイルに記述
2)メニューの作成

「管理画面」→「メニュー画面」で「メニューの名前」欄で名前を付けて、「メニューを保存」
「ページ」で「全て表示」し、メニューにするページを選択し、「メニューに追加」。
右側にメニューが追加されるので、表示順はドラッグして変更する。

3)メニューの出力(表示)
該当ページテンプレートの表示位置に以下の構文を入れる
ウィジェットを使ってサイドバーに「カスタムメニュー」を挿入する方法もある。このサイトでは、ブログにサイドバーを使っている関係でウィジェットは利用していない。尚、サイドバーを増やす方法がある。
・サイドバーを増やす参考サイト:http://c-graphiate.com/?p=172
4)メニューのデザイン設定
上記で出力された状態は、「ul li」のリスト形式なので、メニューの体裁を付ける(レッスンブックでは)
2.パーツテンプレート方式
このページ(WP開発メモ)は、単純にメニューのリスト(Pタグ)で、phpファイルを作成し、ページテンプレートのメニュー挿入位置に以下の構文で読み込んでいるだけ。ページの一部(メニュー)をphpファイルとして利用しているのでパーツテンプレート方式としている。
1)任意のファイル名でリンクを含めてメニューリストを作成し、アップロード
2)以下の構文でメニューファイルをページテンプレートのメニュー位置に読み込む。

07 固定ページへのリンク

固定ページのURL「/?page_id=253」の数値をそのまま記述。

08 固定ページ中心の設計

サイトのページ構成とそれぞれのデザインレイアウトの設計は、WPでも全く同じであることは当然として、WPで各ページの作成に入る時大きな相違は、
  ☆ デザインレイアウトが異なるページに、そのページ用の「ページテンプレート」が必要
  ☆ デザインレイアウトが違えば、「スタイルシート」の記述もページテンプレートに合わせた工夫が必要
WPでのサイト作成の要領は、「テンプレート」に尽きる。テンプレートの作成要領が理解できれば、WPによる基本的なサイトは作成できると言っても過言ではない。
WPの開発要領として、
1.プラグイン:WPには非常に多くのプラグと呼ばれるサブプログラムがあり、ほとんどが無料で利用できる。
2.ネット上には、WP関する情報が非常に多い、是非この情報を利用したい。
3.php言語については、勉強するに越したことはないが、ネット情報やWPレッスンブックの情報で普通のサイトは充分作成できる。また、多くのphpテンプレートがネット上に公開されているので、是非活用したい。

固定ページ中心の設計用に2つのサイトを用意

☆ 簡易版 固定ページ中心の設計

☆ 詳細版 固定ページ中心の設計

09 記事表示のループタグ

記事表示の必須タグ、「投稿記事があれば」「繰り返し表示する」という2つの命令文で構成されている。以下は、記事があったとき、記事タイトルと記事内容を表示している。

記事があれば記事タイトルと内容、なければ「記事がありません。」の場合、

10 最新更新日の表示 2019-7-26 修正

Validation:W3C Markup Validation Service

timeタグを使うと検索エンジンが収集します。

11_wp_head 謎の隙間

プラグインに必須の関数「wp_head()」を入れると上下に隙間が出来る。この解除方法が以下のホームページに記述されている。「functions.php」に以下のように記述するとある。

12_Counterize2の初期値

Counterize2の表示させるphp文を以下のように変える
上記は「1000」から始める場合。

13_カレンダ・カスタマイズ

ブラウザによってカレンダの表示が異なるのを解消

14_パンくずリスト

閲覧中のページがサイトのどの位置かを示す、お馴染みのパンくずリスト。

注意点:固定ページ一覧の階層を正しくしないと、表示が思うようにならない。

15_削除出来ないpタグ、brタグ

設計と異なって 予定を超えた上下にスペースが出来てしまう問題。やっかいなのは、「テーマの編集」(テキスト)やプラグインエディター(wp editerなど)でも表示され無いため、削除する事が出来ない。ページのソースコードを表示することで、思ってもいないタグが挿入されている。

これらの余分なタグを削除する方法は、「functions.php」に以下の構文を入れ事で対応出来る。

16_バージョン情報を取得

WordPressのバージョンを取得して、ページに表示します。

17_WP_文字化け(ハイフン)

WordPressでハイフン(マイナス記号)が正しく表示されない。原因は、WordPressの自動変換機能が働くため、のようです。ハイフンはエンダシュになるということで、これ以外にも幾つかあるようですが、筆者が当面困っているハイフンについて記述しています。

以下は、リストタグにハイフンを1桁から6桁まで入れて表示した例。

  • 行番
  • ハイフン・1桁
  • 2桁
  • 3桁
  • 4桁
  • 5桁
  • 6桁
  • —-
  • —–
  • ——
  • -
  • --
  • ---
  • ----
  • -----
  • ------

1行目は、<li></li>タグに、ハイフンをそのまま記述した場合の表示

2行目は、<li></li>タグ内に、ハイフンを<kbd></kbd>タグで囲んだ場合の表示

文書中にHTMLのコメント挿入は、以下のように記述。

 <kbd>&lt;!– comment –&gt;</kbd>


この問題に対して、WordPressの自動変換を停止させるなどで対応する方策が諸先輩によって記述されています。

特殊文字が自動変換されるのを回避する方法。

18_テンプレートでコメントが入らない

テンプレートのHTML文の中にコメントを挿入したいとかテスト中なので一部分を無効にしたい等の場合、コメントタグ<!-- -->の中にphp文があると、デザインが崩れるなどコメントアウト出来ない。

上記のように、getの前に//を入れて、phpを無効にする。

19_style.cssファイル破損

誤操作でstyle.cssファイルの内容に他のデータが入って全く元のデータが喪失。一瞬、参った!!。

夕食の仕度時間で対処は食後ということで一旦中断。晩酌後、とにかく作り直しは避けたい、ネットで検索、その中に「GoogleChome」のディベロッパーツールでstyle.cssを読み込んでいるcss内容をコピーして修復する方法が記述されていた。この方法で、一瞬にて復元に成功。

WordPressの開発で、普段のページ編集は「Firefox」を使い、表示の確認やテーマ編集に「GoogleChome」を利用している。Googleで強制リロードしていなかったのが幸いであった。

助けて頂いたサイト 「つねずネット様」 →