Sponsor Link

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

トップページ専用ウィジェット,Simplicity

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

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

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

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

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

Sponsor Link

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を、そのまま、子テーマにアップロード。
これで、コピー完了。

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

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

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

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

WordPressのウィジットエリアを複数作成する方法を紹介します。 ウィジットエリアを複数作成しておけば、フッターや

こちらに訪問して概要とレクチャーされている事を拝読させて頂き、トライしてみました。
仕組み等々は、上記記事を参考にされて下さい。😐 
(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’)とウィジェット追加コードを書くだけです。

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

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

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

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

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

widgets-image

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

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

Wordpress サイドバーにプロフィールを表示。コピペで簡単!掲載方法
Wordpress サイドバーにプロフィールを表示。コピペで簡単!掲載方法プロフィール(運営者情報)は必要なのか。 ブログやホームページを作る時、まぁ必要な事は***

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

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

お粗末でした。

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

2015/10/25 追加投稿

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

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

Custom Post Widget の便利な使い方
Custom Post Widget の便利な使い方 今日は、新たに見つけたプラグイン、Custom Post Widgetについて記事を書きます。 ***

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

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

2016/04/06 追加

****************************************************************************
トップページ上部と下部に専用ウィジェットスペースを追加する方法も併せてご閲覧下さい😄
Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる
Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる 前回の記事から数か月経過しての追記記事です。 前回は以下の画像の様な***