WordPressでトップページ・ナビ・サイドバーを、管理画面から気軽に変更できるようにする

2022/11/08 What's Up, サイト制作, 技術系 投稿者:

前回の記事でオリジナルテーマの作成を行いましたが、トップページやヘッダーフッターナビ・サイドバーを変更する際は、テーマのPHPファイルを編集する必要がありました。

WordPress管理画面の「外観」→「テーマファイルエディター」での編集も可能ですが、誤ってテーマファイルを壊してしまう可能性もありますので、それぞれ固定ページ・ウィジェット・メニュー化して、気軽にカスタマイズ出来るようにしたいと思います。

※WordPress5.0からエディターがブロックエディターに変更されましたが、今回はプラグイン「Classic Editor」+「Classic Widgets」または、代替の「Disable Gutenberg」を使用し、クラシックエディターで編集しています。

今回編集するサンプルサイトのWordPressバージョンは6.0.1で、デザインはこちらです。

トップの固定ページ化

トップページがWordPressの管理画面から編集できないサイトも多いですが、それは投稿記事出力などに使うPHPが固定ページ内では使えないからです。
なので、PHP部分だけ別のファイルを呼び出す方法を使います。

トップに固定ページを指定、front-page.phpがある場合は削除

まずトップページ用の固定ページをいったん空で作成し、
WordPress管理画面の「設定」→「表示設定」→「ホームページの表示」で、トップの表示用に作成した固定ページを指定します。

front-page.phpが存在していると、そちらが優先して表示されてしまいますので、バックアップを取ってテーマフォルダから削除します。

※トップ表示の優先順位:
front-page.php > 「表示設定」で指定した固定ページ > home.php > index.php

これでトップページには指定した固定ページが表示されるようになります。

functions.phpを編集

固定ページ内でPHPファイルを呼び出すためのショートコードの設定を、functions.phpに追加します。

トップ用固定ページの編集

元々トップ表示に使っていたPHPファイルのソースはこちらです。

ここから共通部分を除いたメインコンテンツ部分を抜き出して固定ページにペーストし、
最近の記事のPHP部分を、ショートコードの
[myphp file='latestpost']
に変更してPHPファイルを呼び出します。
('latestpost'の箇所は、呼び出すPHPファイルの名前に適宜変更してください。)

また、他にPHPを使っている箇所があったらパスを通常のHTMLに変更します。

トップ用固定ページのソースはこのようになりました。

latestpost.phpの新規作成(呼び出すPHPファイル)

最近の記事を表示するためのlatestpost.phpを作成します。
(latestpost.phpはお好きなファイル名に変更して構いませんが、
先ほどの[myphp file=’latestpost’]のクォーテーションの中も同じ名前に変更してください。)

元々使っていたメインループのPHPはエラーになってしまいますので、サブループで取得する方法に変更します。

※メインループとサブループの違いは、こちらの記事が分かりやすく説明されていましたので、参考になさってください。
https://www.tou-k.jp/IT_HP/wordpress/1992/

このlatestpost.phpをテーマフォルダ直下にアップロードすると、固定ページ内で呼び出した箇所に最近の記事一覧を表示できます。

固定ページ範囲外の調整

上部のメイン画像は固定ページの範囲外でしたので、共通部分にトップページのみにメイン画像を表示するための記述を追加します。

今回はheader.phpの最後に追加しました。

これでトップを固定ページから気軽に変更できるようになりました。

サイドバー・ヘッダーフッターナビなどのウィジェット・メニュー化

ウィジェットとメニューの違い

メニューはテキストリンク、
ウィジェットは画像やカスタムHTML・カレンダーなど、さまざまな機能が利用できます。
用途に合わせて使い分けます。

メニュー

functions.phpの編集

テーマの初期設定ではWordPress管理画面にメニューの項目がありません。
functions.phpに設定を追加する必要があります。

header.php、footer.phpの編集

header.php、footer.phpなどの中の、メニューを表示したい箇所に下記出力コードを記述します。

‘header-menu’の部分は先ほど設定したidに合わせます。

メニューの編集

これで管理画面の「外観」→「メニュー」から編集すると、出力コードを記述した箇所に反映されるようになります。
メニューの編集方法については他に沢山記事がありますので省略します。

追加したメニューの表示が崩れている場合はCSSを適宜調整します。

これでWordPress管理画面からメニューを気軽に変更できるようになりました。

ウィジェット

functions.phpの編集

テーマの初期設定では管理画面にウィジェットの項目がありません。
functions.phpに設定を追加する必要があります。

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’, の箇所の
 %1$sは、ウィジェット名+番号
 %2$sは、widget_ウィジェット名
に変換されますので、CSS指定などがしやすくなります。

sidebar.phpの編集

sidebar.phpなどの中の、ウィジェットを表示したい箇所に下記の出力コードを記述します。

‘sidebar1’の部分は先ほど設定した’id’に合わせます。

ウィジェットの編集

これで管理画面の「外観」→「ウィジェット」の内容が、出力コードを記述した箇所に反映されるようになります。
ウィジェットの編集方法については他に沢山記事がありますので省略します。

追加したウィジェットの表示が崩れている場合はCSSを適宜調整します。

これでウィジェットからサイドバーを気軽に変更できるようになりました。

searchform.phpを新規作成 ※検索ウィジェットを使用する場合

検索窓は好みのデザインにするためにコード自体をカスタマイズする必要があったので、searchform.phpを作成しました。
テーマフォルダにアップロードすると、検索ウィジェットを使用したときにこのファイルが呼び出されます。

search.phpを新規作成 ※検索ウィジェットを使用する場合

検索結果を表示するテンプレートです。

まとめ

これでトップページ・ナビ・サイドバーを管理画面から気軽に変更できるようになりました。

弊社ネディアではサイト・システム制作や保守管理サービスを行っています。
分からない、上手くいかないなどがございましたら代行いたしますのでご連絡ください。

他にもサーバ・ネットワーク保守なども行っておりますので、ネットワークのことなら全てネディアにおまかせください。

お見積もり・お申し込み・お問い合わせはこちら
 
 

カレンダー

 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
1234567
891011121314
15161718192021
22232425262728
       
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
     12
3456789
10111213141516
17181920212223
24252627282930
31      
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
     12
3456789
10111213141516
17181920212223
242526272829 
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
    123
45678910
11121314151617
18192021222324
25262728   
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
U・Iターン転職しませんか?
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)