今日からwordpressのテーマを作ってみようと思う(4)sideber.php編

wordpress_テーマ作成

サイドバーをいじってみる

システムエンジニア(SE)かっきーです。

header.php、index.phpときたら次はサイドバーの作成です。

サイドバーはsidebar.phpに記載いたします。
Wordpressでサイドバーを使う殆どの方は、ウィジェット機能を使用してるため
まずはウィジェットを使えるようにします。

ウィジェットの使用方法

ウィジェットを使用させるにはfunction.phpにコードを記載する必要があります。
下記コードをfunction.php内にしてください。

function.php

register_sidebar(array(
			'id'  => 'saideber',
			'name'=>'サイドバー',
			'before_widget'=>'<div class="sidebar-wrapper">',
			'after_widget'=>'</div>',
			'before_title' => '<h4 class="sidebar-title">',
			'after_title' => '</h4>'
));

簡単に説明しますと、
・name サイドバーの名前。ダッシュボードに表示される。
・before_widget, after_widget ウィジェットの前後に入れる文字列を指定。
・before_title, after_title ウィジェットのタイトルの前後に入れる文字列を指定。
となっています。

sideber.phpへの記載

これでWordpress管理画面の
「外観」→「ウィジェット」からサイドバーという名のウィジェットエリアが作成されたのを確認できると思います。
しかしこのままでは、まだ表示されません。

表示させるために「sideber.php」に下記コードを記載してきます。

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

ここでサイドバーにはいくつものサイドバーエリアを作るかと思いますが、
その際も、register_sidebarの関数で指定した、IDをdynamic_sidebarの引数に渡して上げることにより、
どのサイドバーエリアを表示させるかが場合分け出来ます。

ウィジェットの作成

WordPressではデフォルトで何個かウィジェットが用意されています。
しかし、ウィジェットを作成して簡単にサイドバーに入れたいという方のためにも
ウィジェットも作成したいと思います。

function.php
class MY_Widget extends WP_Widget {
	function __construct() {
		parent::__construct(false, 'ウィジェットの名前');
	}
	
}

たったこれだけでウィジェトが出来たかと思います。
何も機能はありませんがこの関数の中にお好きな処理を記載していけばOKです。

記事の文章作成や、Wordpressサイトのカスタマイズで
お困りではありませんか?
ライティングレシピでは、文章コンサルとWordpressサイトのカスタマイズを承っております!

文章コンサル
●文章力をあげてスキルアップしたい
●SEOを意識した文章を書きたい
●ライター目線で文章が書けるようになりたい

Wordpressサイトのカスタマイズ
●憧れのサイトのようにしてみたい
●不具合を修正したい
●デザインを理想通りに変更したい

少しでも当てはまる項目があるなら、いつでもお気軽にご相談くださいませ。 ココナラ満足度100%で、提案力には自信があります!

コメントを残す

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