【WordPressテーマ】自作テーマ作成の記録 その10【2つ目】

HTML
スポンサーリンク

こんにちは朱夏です。

WordPressテーマ作成やっていきます。
今回はまだWordPress化出来ていない以下の項目をWordPress化していきます。

    • 人気記事
    • Twitter
    • 検索窓
    • プロフィール
    • About(テキスト)

大きく分けてサイドバーとフッターの2か所の作業ですね。
それではやっていきます。

勉強させていただいている動画はこちら。

人気記事

サイドバーに表示している人気記事です。
これはfunctions.phpへの記述とindex.phpへの記述の2つが必要です。

コードはこちらのサイトを参考にしています。

 

 

functions.php

参考ブログからのコピペで行けます。
ブログに丸写しは流石にまずいのでここにはコードは貼りません。

 

index.php

 

index.php側はこんな感じです。
人気記事を取得する仕組みの部分をお借りして、表示するスタイルの部分などは変更を加えています。

 

ウィジェット追加設定

残りの項目はウィジェットを使用して実装していきます。
何故ウィジェットを使うかというと、管理画面から編集できるようになるからです。
最初にfunctions.phpへウィジェット追加の書き込みをします。

 

実装する項目ごとにIDを付けています。

    • サイドバー検索:sidebar_widget01
    • サイドバーTwitter:sidebar_widget02
    • フッタープロフィール:footer_widget01
    • フッターAbout:footer_widget02

index.phpから呼び出すときに、IDと紐づけして呼び出すことになります。

 

function.phpを追記することによって、管理画面からウィジェットを追加、変更できるようになります。
管理画面はこんな感じです。

この追加された項目を編集して、サイドバー、フッターに機能を追加していきます。

 

Twitter

Twitterの埋め込みをウィジェットを使っての実装へ変更します。
作成したサイドバーTwitterのにウィジェット「カスタムHTML」を追加して埋め込み用のコードを書きます。

カスタムHTMLの追加方法は、管理画面左列の利用できるウィジェットから、カスタムHTMLを「サイドバーHTML」へドラッグ&ドロップするだけです。

追加したカスタムHTMLを展開すると、HTMLを記述できるので、そこに埋め込み用のコードを張り付ければ終わりです。

タグの頭にインデントを付けると注意されるので、消しておくとスッキリします。

 

※埋め込み用のコードはこちらから取得できます。

 

次にindex.phpでウィジェットを表示するコードを書いていきます。
Twitter部分の書き換えは以下のようになりました。

変更前

 

変更後

 

これで、ツイッターの埋め込みを実装出来ました。

 

検索窓

検索窓はウィジェットの機能があるのでそれを追加します。
追加方法は、管理画面左列の利用できるウィジェットから、検索を「サイドバー検索」へドラッグ&ドロップするだけです。

index.phpの記述を書き換えます。

変更前

 

変更後

 

検索窓のデザインが変わってしまったので、Bootstrapのデザインを使えるようにします。
設定方法は以下です。

    1. searchform.phpファイルを作成
    2. 以下のコードを張り付け

 

以上です。

これでTHMLで作成した時と同じデザインに戻す事が出来ました。

WordPressの検索窓を使用する場合、name=”s”は固定値になります。

 

プロフィール

フッターに表示するプロフィールをウィジェットから呼び出せるようにします。
実装方法は、ウィジェットに作成したフッタープロフィールにカスタムHTMLを追加して、HTMLでコードを書くだけです。

カスタムHTMLの追加方法は左列の利用できるウィジェットから、カスタムHTMLをフッタープロフィールの上にドラッグ&ドロップするだけです。

そして、HTMLでコードを書いていきます。

 

カスタムhtmlはHTMLで書かないといけないので、テンプレートタグを使えません。
画像などを扱う場合は、プレビューされている画像のURLをデベロッパーツールなどで確認してパスを通してやる必要があります。
次に、index.phpでウィジェットを呼び出す記述をする必要があります。
コードはこんな感じに修正しました。
変更前

 

変更後

 

ファイル内の記述はがっつり減りましたが、その分カスタムHTMLに移しているだけです。
これでプロフィールが実装出来ました。

 

About(テキスト)

About(テキスト)の項目を管理画面から編集できるようにします。
実装方法は、今までと同じく利用できるウィジェットから、テキストを「フッターAbout」へドラッグ&ドロップするだけです。

タイトルをAboutoへ変更して、本文にテキストを書いていきます。

次に、index.phpを変更します。

変更前

 

変更後

 

これで、実装完了です。
テキスト部分を変更すれば、管理画面からいくらでも変更する事が出来ます。

 

実行画面

というわけで、結果表示画面はこちらになります。

 

見た目はほとんど変わりませんね。
これで成功です。

HTMLで作成した時と同じ様にWordPress化できるのが一番です。

 

あとがき

今回で、トップページのWordPress化はほぼ完了です。
あと残っている作業は、ヘッダー、サイドバー、フッターの分割くらいですかね。

ここまででもかなりできることが増えました。
カルーセルの実装とか、今回の検索窓のBootstrapデザイン使用とかは前回は出来ていなかったことです。
しもむらさんの動画には本当に感謝しかありません。

動画では、次回リンク先のページが表示されるようにしていく様です。
全体的にもだいぶ完成に近づいてきているので、毎回楽しみです。

今回はここまでです。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました