無料のHTML・CSSテンプレートをWordPress化する方法No.5(ウィジェットとカスタムメニューを追加する)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版(10/8.1/8/7 64-bit)
MAMP:4.0.1
Atom:1.27.2

 

今回は、オリジナルのテーマにウィジェットとカスタムメニューを対応させていきます。

 

ウイジェツトに対応させる

 

まず、atomに functions.php のファイルを作ります。

functions.phpは最初から最後までphpファイルになりますので

1.functions.phpに開始タグと終了タグを記述します。

 

 

2.上記開始タグと終了タグの間に以下のようにコードを加えます

WordPress.ORGより

 

参考に、私は以下のように記述しました。

 

 

3.sidebar.phpに以下のコードを加えます

wordPress関数リファレンスより

挿入後の画像は以下の通りです。(18行目です)

WordPressの管理画面から外観にポインタをあてるとウィジェットを選択でるようになっていますので確認してくださいね。

カスタムメニューに対応させる

1.functions.phpに以下のコードを追加します。

今回はフッターにメニューを追記するのでメニュー名はfooterのみでいいのですが、今後のことを考えて今回は、全て記述します。

 

先ほどfunctions.phpに記述しましたので、以下のように記述します。

 

2.footer.phpに以下のコードを追記する

それでは、以下のコードをfooterに追記します。

次にwordpressの管理画面の外観から→メニューを選択し

メニュー名にplace_footerと入力しメニューを作成ボタンをクリックします。

次にメニュー構造のメニュー設定で

フッターにチェックを入れて、メニューを保存します。

 

すると位置管理のタブができるので、位置管理をクリックします。

 

 

次に位置の管理タブの中のフッターからplace_footerをクリックして変更を保存します。

 

 

フッターに表示させたいメニューを選択してメニューに追加します。

 

 

 

するとメニュー構造の中に追加したメニユーが表示されますので、表示したい順番などドラッグ&ドロップで変更して保存してください。

 

にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ WordPressへ

 

役に立ったら共有してね

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)