WordPress sidebar.php 初心者の為のコード説明

Wordpress sidebar.php 初心者の為のコード説明

初心者の為のsidebar.phpのコードの解説(説明)をしたいと思います。Wordpress特有の説明になります。使用しているテーマはGraphyになります。他のテーマと記載内容違うのかどうか?分かりませんがsidebar.phpを分かり易く解説・説明していると思いますのでどうぞ読んでみて下さい。

 

スポンサーリンク

sidebar.phpの記載内容

もう知ってられるとは思いますが一応説明しておきます。Wordpressのダッシュボード外観ウィジェットサイドバーと書かれている部分がsidebar.phpで実行される内容になります。

 

wordpress sidebar.php

wordpress sidebar.php

 

サイドバーの記載内容は下記の様になります。このコードがどの様な役割をしているのかなるべく分かり易く説明していきたいと思います。私のテーマは以下の様にコード記載されています。

<?php
/**
* The Sidebar
*
* @package Graphy
*/
if ( ! is_active_sidebar( 'sidebar' ) ) {
return;
}
<div id="secondary" class="widget-area sidebar-area" role="complementary">
<?php dynamic_sidebar( 'sidebar' ); ?>
</div><!-- #secondary -->?>

 

sidebarphpの説明

if ( ! is_active_sidebar( 'sidebar' ) ) {return;}

if if文になります。もしって意味です。

is_active_sidebar() WordPressの関数になります。()内にsidebarと記載が有りその値を実行している関数になりますね。実行ファイルはwp-includes/widgets.phpで実行されます。では後で記載を見てみましょう。

return 返り値を送ります。返り値とは関数等の記載をしてコードが実行した値を変数にその値を与える記載で使用するのが一般的ですが、この場合は単に関数だけを使用して、その後の記載に移ると言う意味のreturnになります。

is_active_sidebar()関数

function is_active_sidebar( $index ) {
$index = ( is_int($index) ) ? "sidebar-$index" : sanitize_title($index);
$sidebars_widgets = wp_get_sidebars_widgets();
$is_active_sidebar = ! empty( $sidebars_widgets[$index] );
return apply_filters( 'is_active_sidebar', $is_active_sidebar, $index );
}

$index indexと言う名前で変数宣言をしています。

is_int() 変数が整数か調べるPHPの関数になります。返り値はTRUE(値が有ります)FALSE(値が有りません)になります。

? “sidebar-$index” 先のis_int() で取得値が整数なら変数にsidebar-が変数indexに与えられます。

sanitize_title(); WordPressの関数になります。タイトルの無駄な記載を取り除く記載になります。

$sidebars_widgets sidebars_widgetsと言う名前で変数宣言をしています。

wp_get_sidebars_widgets(); ウィジェットで設定されている項目の値を呼び出す関数になります。

$is_active_sidebar is_active_sidebarと言う名前で変数宣言をしています。

! empty( $sidebars_widgets[$index] ); empty();で()内の変数が空かどうかを調べています。返り値はTRUE(値が有ります)FALSE(値が有りません)になります。しかし!が有りますので否定文になりここでは逆になります。つまり値が有ればFALSE(値が有りません)になり値がなければTRUE(値があります)になります。

return apply_filters( ‘is_active_sidebar’, $is_active_sidebar, $index ); returnで返り値になり、apply_filters(); がWoredpressの関数になります。フィルターフック呼び出し新規作成の関数になります。‘is_active_sidebar’ と言う関数の$is_active_sidebar の値(TRUE(値があります。)かFALSE(値がありません))と$index の値TRUE(値が有ります)かFALSE(値はありません))の値の再登録になります。フィルターフックとはサイトが表示された際等で実行されるものになります。実行ファイルは wp-includes/plugin.phpになります。

<div id="secondary" class="widget-area sidebar-area" role="complementary">

div id=”secondary” divで適応範囲を指定してidでsecondaryと言う名前のスタイルを呼び出しています。

class=”widget-area sidebar-area” ここのそうですねclassでwidget-area sidebar-areaと言う名前のスタイルを呼び出しています。この2つsecondaryとwidget-area sidebar-areaで呼び出されるファイルはCSSファイルになります。つまりsecondaryとwidget-area sidebar-areaが記載されているCSSファイルを編集する事でサイドバーの文字の太さ・装飾・フォントの設定が行えると言う事です。

role=”complementary” マークアップ?案内?イマイチよくわからない記載のrole属性ですがサイドバーではcomplementaryと記載する事が一般的みたいです。後日勉強して説明します。

<?php dynamic_sidebar( 'sidebar' ); ?>

html出力値
<aside id=”text-4″ class=”widget widget_text”><h1 class=”widget-title”>ソーシャルサイトボタン</h1>   <div class=”textwidget”><div class=”ninja_onebutton”>と内容
<aside id=”search-2″ class=”widget widget_search”><form role=”search” method=”get” class=”search-form” action=”http://seoaccessup.top/”>と内容
<aside id=”text-3″ class=”widget widget_text”><h1 class=”widget-title”>管理人紹介:プロフィール</h1>   <div class=”textwidget”>と内容
<aside id=”text-5″ class=”widget widget_text”><h1 class=”widget-title”>是非!!実践して頂きたいお勧め記事</h1>   <div class=”textwidget”>と内容
<aside id=”text-2″ class=”widget widget_text”><h1 class=”widget-title”>管理人お勧め</h1>   <div class=”textwidget”>と内容
<aside id=”categories-2″ class=”widget widget_categories”><h1 class=”widget-title”>カテゴリー</h1>と内容
<aside id=”pages-3″ class=”widget widget_pages”><h1 class=”widget-title”>と内容

長いので短縮しましたがもう大体上記コード記述を見れば理解できましたよね。

<?php dynamic_sidebar( ‘sidebar’ ); ?> PHP言語でdynamic_sidebar() WordPressの関数をsidebarで実行しています。dynamic_sidebar() 関数はウェジットの名前もしくはIDを呼び出して実際に表示する関数になります。先ほど取得した変数sidebarの値を実行しているみたいですね。ファイルの保管場所は wp-includes/widgets.phpになります。

以上がsidebar.phpの説明になります。sidebar-footer.phpと言うPHPファイルが有ります。何やらサイドバーとフッターがくっ付いているファイルみたいなのでこちらも一緒に説明したいと思います。

 

sidebar-footer.phpの記載内容

WordPressで言うフッター1・フッター2・フッター3・フッター4の項目になる記載ですね。ダッシュボード外観ウィジェットに編集する場所が有ります。それがsidebar-footer.phpでの出力される内容になります。

 

wordpress sidebar-footer.php

wordpress sidebar-footer.php

 

<?php
if (   ! is_active_sidebar( 'footer-1' )&& ! is_active_sidebar( 'footer-2' )&& ! is_active_sidebar( 'footer-3' )&& ! is_active_sidebar( 'footer-4' ))
return;
?>

<div id="supplementary" class="footer-area">
<div class="footer-widget">

<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<div class="footer-widget-1 widget-area" role="complementary">
<?php dynamic_sidebar( 'footer-1' ); ?></div>
<?php endif; ?>

<?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
<div class="footer-widget-2 widget-area" role="complementary">
<?php dynamic_sidebar( 'footer-2' ); ?></div>
<?php endif; ?>

<?php if ( is_active_sidebar( 'footer-3' ) ) : ?>
<div class="footer-widget-3 widget-area" role="complementary">
<?php dynamic_sidebar( 'footer-3' ); ?></div>
<?php endif; ?>

<?php if ( is_active_sidebar( 'footer-4' ) ) : ?>
<div class="footer-widget-4 widget-area" role="complementary">
<?php dynamic_sidebar( 'footer-4' ); ?></div>
<?php endif; ?>

</div><!-- #footer-widget-wrap -->
</div><!-- #supplementary -->

以下各項目sidebar-footer.phpの説明にまります。

if (   ! is_active_sidebar( 'footer-1' )&& ! is_active_sidebar( 'footer-2' )&& !is_active_sidebar( 'footer-3' )&& ! is_active_sidebar( 'footer-4' ))return ;?>

if ifでもしって意味ですね。

!is_active_sidebar( ‘footer-1’ ) 上記で説明したWordpressの関数になります。そして手前に!(ビックリマーク)が有る事に注目して下さい。!否定するコードになります。つまりここでは、foooter-1,2,3,4に値が無かったらって意味になりますね。そして値が無ければreturn;を実行しています。戻り値ですがこの場合もその後の記載に移ると言う意味のreturnになります。

<div id="supplementary" class="footer-area">
<div class="footer-widget">

id・class×2のスタイル実行コードになります。全てCSSファイルの実行になります。こんなに実行する必要あるのでしょうかね・・・・見直すべき項目だと思います。ではどの様な優先順位でスタイル・文字の色・文字フォントなど等が決定されるのでしょうか?簡単に説明します。では見てみましょう。

スタイルの優先順位

CSSの取得元の優先順位

1番:作成者が作成した作成者スタイルシート2番:ブラウザを作成したユーザースタイルシート3番:ブラウザ標準のスタイルシートです。

id・classによる優先順位

1番:idのスタイルシート2番:classのスタイルシートです。

その他優先順位

それぞれの中での優先順位は後の記述した方が優先されます。又!important 宣言をすることにより先に記載したコードを適用する事も出来るみたいです。

<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<div class="footer-widget-1 widget-area" role="complementary">
<?php dynamic_sidebar( 'footer-1' ); ?></div>
<?php endif; ?>

if if文ですね。もしって意味にになります。

is_active_sidebar( ‘footer-1’ ) if文とくっ付けて値が有る時の実行になります。

div class=”footer-widget-1 widget-area” role=”complementary” class=”footer-widget-1 widget-area”又Classです・・・・中身見て無いですけど・・・・ハッキリ言ってここら辺は適当に作ったのかな?role=”complementary” フッターではcomplementaryとマークアップするらしいですね。

dynamic_sidebar( ‘footer-1’ ); こちらも先ほど説明した項目になります。ウェジットの出力ですね。

この記載内容をまとめるとfooter-1にウェジットの値が有れば実行してウェジットの出力をfooter-widget-1 widget-areaのCSSファイルで文字の色・大きさ等を決めて出力しています。

上記の項目をそれぞれfoote-1~4を繰り返していますね。私の場合foote-1~4の項目を使用していないのでこのPHP自体今の所全て要らない項目になりますね。メインのPHPを覗いてみましたが、<?php get_sidebar-footer(); ?> と言う記載内容が有りませんね。、<?php get_footer(); ?> もしくは<?php get_sidebar(); ?> と言うWordpressの関数で一緒に呼ばれている可能性が有ります。前にも記載しましたがWordpressの関数を触るのは御法度です。バージョンアップ・プラグインの際にどの様なエラーが発生するのか?分かりませんので触るのはテーマのファイル・CSSファイルだけにしておきましょう。

 

まとめ

ダイレクトにサイドバーに項目を追加すればPHPの記載を全て消せますね。CSSファイルも自分で記載すればもっと分かり易サイドバーになりそうです。そんなに記載も多く無いので要るものと要らないものをハッキリさせると少しはSEO対策に繋がりそうです。

 

ここまで読んで頂いてありがとうございます。これからもPHPの記載内容をより分かり易く解説・説明して行きたいと思いますので、どうぞこれからも宜しくお願いします。

 

Posted in PHP

関連記事一覧

header.php language_attributes();関数の説明
WordPress 初心者の為のheader.php解説(説明)
SEO対策 header.php コードを見直し表示速度を上げる
WordPress関数を使ってブログ内に関連記事を設置する方法
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です