WordPress-Simplicity トップページ専用ウィジェットをつくる

先日、Simplicityのわいひらさんのフォーラムを徘徊していたところ、

ウィジェットスペースの追加

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › ウィジェットスペースの追加このトピックには4件の返信、2人の参加者があり、最後にわ

この様な書き込み↑を発見しました。

常々トップページはSimplicityの特性を活かしつつ、
もう少し華やかにできないかしら?と思っていた事もあり、
何気にここに書かれているbefore-main.phpで出来る事を辿ってみました。

このページのメニュ

Simplicityの親テーマのbefore-main.phpを子テーマにコピー
Simplicity 子テーマでウィジットエリアの追加
ウィジェットが追加されているかみてみた👀

Simplicityの親テーマのbefore-main.phpを子テーマにコピー

元ネタに以下の様なレスがありました(以下、筋肉パンダがお茶目なHidekichiさんの書き込み引用)

before-main.phpと言う、多くの人に忘れられたファイルもあるにはあるのですが(笑)もし仮にbefore-main.phpに何かしら入れたら、#mainと#sidebarの幅(PCの場合)を持ったスペースが確保できます。大きめのスライダーとか入れるにはモッテコイですけどね。逆に大きすぎるわ!!と言われるかも知れないぐらいです。 before-main.phpは特に何も書いてなかったと思うので、普通にphpイジる感じで色々できます

ほぅ、凄いやぁ～😋
私には、こういう発想がないもの。
特にこの「before-main.phpは特に何も書いてなかったと思うので」という一文。超気に入りました。

何もないって事は、私の感覚から言うと、イロイロ足しても大丈夫?って事です。

スライダーを挿入する為のプラグインはインストールはしていないものの見付けてはいるし、
その内投稿記事で使ってみようと思っていたけど、
トップページで表示する為に、before-main.phpを触って?プラグインなしでもOKなのかな?
兎に角良い感じの事ができそうね😍

って事で早速みてみた。

このイケテル感じのファイル、before-main.phpは、テーマの編集画面と、FTPでもみてみたけど、
親テーマにしか入っていない模様。

そこで、子テーマにbefore-main.phpを置きました。

一応、子テーマへの入れ(置き)方。

FTPでSimplicityの親テーマから、before-main.phpを自分のローカル側(PC)にDL して、
そのDLしたbefore-main.phpを、そのまま、子テーマにアップロード。
これで、コピー完了。

すると、外観テーマの編集画面でも、ファイルが編集可能になります。

いざ、開いて中をみてみると、本当に空っぽ。ワクワクします😋

Simplicity 子テーマでウィジットエリアの追加

先ずは、ソース元にわいひらさんが、参考記事を貼ってくれていましたので、

http://webnonotes.com/wordpress/addwidget/

こちらに訪問して概要とレクチャーされている事を拝読させて頂き、トライしてみました。
仕組み等々は、上記記事を参考にされて下さい。😐　
(Web’Notesの管理人さん、参考になる記事を有難うございます。)

使用する(書き込みをする)ファイルは以下の3つのファイルだけです。

子テーマのfunctions.php
子テーマのstyle.css
子テーマのbefore-main.php
↑これは、先程親から引き継いだコピーのファイルという事デス。

親テーマを弄らずに子テーマだけを触るので、落ち着いてやれば平気です。😌

Simplicity　子テーマ　functions.php を編集

外観テーマの編集画面で
Simplicity child: テーマのための関数 (functions.php)を開き
functions.phpに以下の様に書き足します。

//トップページメインのウィジェット
if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_widget" id="%1$s">'."n",
        'after_widget' => '</div>'."n",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'name' => 'トップページメイン',
        'id' => 'top_main_widget'
    ));
}

この様に書きます。

↓以下 ‘before_title’ => ‘<h3>‘,　’after_title’ => ‘</h3>‘,　の部分は、

        'before_title' => '<h3>',
        'after_title' => '</h3>',

<h2></h2>でも良いです。(見出しタグは大きい見出し文字が良い方は、お好みで。)

Simplicity　子テーマ　style.css を編集

次に、同じテーマの編集画面で
Simplicity child: スタイルシート (style.css)を開き
style.cssに以下の様に書き足します。

/*******************************
* トップページメインウィジェット追加
********************************/

.top_main_widget {
  background-color:#ffff;
  padding:10px;
  margin-bottom:10px;
}

この様に書き足します。

background-color:#ffff;
この↑background-color:#ffff;は背景色の指定ですので、お好きなカラーコードを指定して下さい。
因みにここでは「白」です。

また、この部分に好みの表示の仕方(影とか、囲みとか)を指定してやれば
よりカッコよくなるかもデス。😏

Simplicity　子テーマ before-main.php を編集

既に編集した2つのフィイルと同様、テーマの編集画面で
Simplicity child: before-main.php(親から引き継いだコピーのファイル)を開き
真っ白なbefore-main.phpに以下の様に書きます。

<?php
if (is_front_page()){
    dynamic_sidebar('top_main_widget');
}
?>

上記のように、dynamic_sidebar(‘top_main_widget’)とウィジェット追加コードを書くだけです。

ウィジェットが追加されているかみてみた👀

では、早速確認してみましょう。
外観　ウィジェットをクリックしてみましょう。
すると、ちゃんと追加されました。

トップページウィジェットが追加された!

後は、このトップページメインエリアに利用できるウィジェットを追加して、編集するだけです。😊

簡単なのは、テキストを入れて、サイトの紹介や挨拶文等を表示しても良いと思いますし、
ソース元のように、画像スライダーを挿入しても良いかも。

以下、ウィジェットに関連する?記事です。

Wordpress　サイドバーにプロフィールを表示。コピペで簡単!掲載方法

Wordpressでサイドバーにプロフィール【運営者情報掲載方法】を表示する方法を書いています。コピペで簡単にお持ち帰り下さい。プラグインは使いません。

私は、ちょいと他の事を思いついたので、
実践して上手くいったらまた別の記事にします😋

ご閲覧をありがとうございます。

お粗末でした。

****************************************************************************

2015/10/25　追加投稿
****************************************************************************

このスペースの活用方法のサンプル?を以下の投稿で書いています。

Content Blocks (Custom Post Widget)の便利な使い方

Content Blocks (Custom Post Widget)について。このプラグインを使用すると、WordPressのデフォルトで装備されている、テキストウィジェットを使う事が可能です。サイドバーのウィジェットやショートコードを使用してコンテンツブロックを編集し、表示することができます。

「例1.トップページを変更してみた。」の辺りからご閲覧頂ければ、活用方法がお解り頂けるかと。
宜しければ、参考にして下さい😊

****************************************************************************

2016/04/06　追加
****************************************************************************
トップページ上部と下部に専用ウィジェットスペースを追加する方法も併せてご閲覧下さい😄
https://mitemita.com/top-dedicated-widget2/