Twenty Twelveテーマを利用した簡単な WordPress テーマの編集(カスタマイジング) - ウィジェットと検索ボックスを追加する

この記事では、デフォルトのテーマの一つであるTwenty Twelveテーマを簡単に変形する方法を説明します。

この記事を正しく理解するためには、PHPのよく知っている必要はないが、簡単に修正する方法を知っている必要があります。 そしてCSSの理解も少し必要です。 PHPファイルを修正して、CSSを使用して要素の配置を調整する予定です。

Twenty Twelveテーマを利用した簡単な WordPress テーマの編集(カスタマイジング) - ウィジェットと検索ボックスを追加する

まず、Twenty Twelveテーマを初めてインストールして文を一つ作成した画面です。

Twenty Twelveテーマを利用した簡単な WordPress テーマの編集(カスタマイジング) - ウィジェットと検索ボックスを追加する

(私はpage.phpを別の名前で保存してhomepage.phpという別のテンプレートを作成作業しました。)

わざわざ何のデザインを適用していない。 とても寂しいですね。 ヘッダーに背景画像を入れると少しよくないでしょう? したい場合は、ヘッダー/メニュー/サイドバーなどを必要に応じて変更することができます。 この記事では、次の操作を実行しようとします。

  1. ヘッダーの下に新しいウィジェット(Widget)の領域を追加します。
  2. 新たに追加されたウィジェット領域にスライダーを配置して、スライダの効果を与えます。
  3. ヘッダの右側に新しいウィジェット領域を作成し、検索ボックスを追加します。

少し複雑になることだが、原理さえ分かれば、非常に簡単です。

まず、このタスクを実行するためには、 WordPress Codexサイト(http:// codex。wordpress.org /)でユーザーウィジェットを追加する方法を確認することです。

まず、ヘッダー領域のすぐ下にウィジェット領域を追加するためのWidgetizing Themes(http://codex。wordpress.org / Widgetizing_Themes) ページにアクセスします。 このページで、下の図に示すXNUMXつのコードをそれぞれfunctions.phpファイルとheader.phpファイルまたはpage.phpファイルに追加すると、ウィジェット領域が作成されます。 もちろん、関数名とid名は適切に修正してください。

Create New Widget Area

(私はHeader.phpのheaderが終わる位置のすぐ下に追加しました。)

今ルックス>ウィジェット領域に行ってみると、追加したユーザーのウィジェットが追加されたことを確認することができます。

Widget1_2012

ここまで完了したら、必要なスライドショープラグインをインストールして、スライドを作成した後、作成したウィジェット領域に追加します。 その後、レイアウトが若干歪むんです、それはCSSを使用して変更する必要があります。

私はMeta Sliderという無料のスライダープラグインをインストールしてテストにスライドショーを追加しました。 革命スライダーのような有料スライダープラグインを使用すると、よりおしゃれなでしょう? (ただし、特殊な効果を必要としない以上、あえて有料のプラグインまで使用する必要はないようです。)

2012_slider

スライダーをヘッダーの下に配置したスクリーンショット。 もう初めよりは単調さが少し減りましたね。 ヘッダーの下に新しいウィジェット領域があるため、スライダーでなくても他のウィジェット(たとえばビデオなど)も追加できます。

そして、プラグインを使用すると、特定のページ/カテゴリのみスライダが表示されるよう設​​定することもできます(この部分は、後日議論する予定です)。

現在サイトのタイトルの横の寂しい領域に検索ボックスを追加してみましょう。 今どのようにするか知ってでしょう? 前の作業を繰り返してください。

http://codex.wordpress.org/Widgetizing_Themes 페이지를 참조로 새로운 위젯을 하나 만들고 이제 해당 코드를 のfunctions.phpheader.phpの(例えばタグのすぐ上)に直接追加した後、cssでの位置を適切に調整します。 (注:テーマファイルを変更する場合 子テーマを作って進行してください。 ようテーマが更新されても変更は消えません。)

その後、 ルックス>ウィジェット メニューに新たに追加されたウィジェット領域が表示されます。

CSSを利用して位置を調整する仕上がりになります。 修正された最終的な姿です。 最初のものより単調に多くを与えるしまった? 他のテーマでも似たような方法で修正すると、必要な部分にウィジェットを追加することができます。

2012_final

Twenty Twelve、Twenty Thirteen...などの基本的なテーマをうまく活用しても、きれいなスタイルのブログを作成できます。 基本テーマを使うと不要なプラグインがなく、スピード面でもメリットがあり、カスタマイジングも比較的簡単です。

参照


6のコメント

  1. あげ情報を見て、多くの有用されています。
    ウィジェットを追加しましたヘッダのみ出るようにしたいのです本文の中にも出てきます。
    おそらく$ contentの中にウィジェットが追加され、page.php中the_contentため本文にも出てくるようです。
    ウィジェットをヘッダのみ見えるようにして本文には見えないようにするには、どこをどのように修正すべきか。
    お願いします。

    1. 原理を理解すれば容易に可能でしょう。
      原理は、ウィジェット領域を作って、ヘッダーの位置に追加し、ウィジェットエリアにウィジェット(例えば、スライダー)を配置することです。 したがって、適切にヘッダの位置に追加すると、本文に出てくる理由はありません。

    1. コメントありがとうございます。
      この記事は、初期に作成された文章なのでたくさん不十分です。 機会があれば内容を大幅に補強して作成しようとする計画を持っていますが、いつ可能か分かりません。
      寒さが猛威を振るっていますね。 風邪に気をしてください。

コメントを残す

*メールアドレスは公開されません。