WEBサイトを一から作るための解説ブログ

あなたが初めてサイトを作るための解説をします

wordpressでサイトを作る解説5回目、サイドバーの作り方

5回目の解説の目標

5回目の解説の目標はトップページと記事の中身のページに表示されるサイドバーの作成です。

サイドバーは↓のことですがウィジェットとも言います。

画面の右側にあるバーのことです

 

サイドバーの実装

サイドバーが表示できるようにするにはまずfunctions.phpに↓の記述をします。

そうすると管理画面の外観の中に「ウィジェット」が表示されるのでクリックして下さい。

 

ウィジェットの画面に入るとサイドバーに色々追加できるのが分かります。

 

ウィジェットをそのまま使うとデザインがダサいので私は極力使わないようにしています。

プラグインを使ってもできるのですがプラグインは入れれば入れるほどサイトの読み込みが遅くなります。

サイトの読み込みが遅いと画面の表示が遅くなり、検索順位(ネットで検索した時の表示される順位)が下がる可能性があります。

Googleはサイトの読み込みも検索順位に関係することを発表しています。

だからプロフィールのみウィジェットを使ってあとは全部コードで表示できるようにします。

 

プロフィールの作り方

ウィジェットの画面で「カスタムHTML」を画面右の「サイドバー」と書いてある所にドラッグアンドドロップします。

赤枠を青枠にドラッグアンドドロップします

 

すると↓になるので赤枠をクリックします。

 

クリックするとカスタムHTMLが開いてタイトルと内容が書けるようになるのでタイトルは空白のままで内容の所に↓のコードを書いて下さい。

画像のパスは人によって変わりますが探し方の説明をします。

管理画面でメディア > 新規追加をクリックします。

 

そうすると画像を登録できる画面になるので「ファイルを選択」をクリックします。

赤枠をクリックします

 

そして画像を選ぶのですがコーディングデータが入っているフォルダの中のimagesフォルダの中のsite-profile.jpgを選びます。

そして↓の「編集」と書いてある部分をクリックします。

赤枠をクリックします

 

すると赤枠の中にパス表示されるのでそれをコピーして画像のパスの所に貼って下さい。

 

「あなたのTwitterのURL」、「あなたのFacebookのURL」、「あなたのInstagramのURL」はあなたのURLを書いて下さい。

もしSNSをやってないならhref=”#”でいいですがブログの記事を発信して人から読んでもらうのにTwitterは有効です。

完了したらウィジェットが表示されるようにします。

sidebar.phpの6行目から23行目を↓にします。

 

書き終わったらトップページに戻ると↓になっています。

赤枠の中が表示されるはずです

 

「検索フォーム」、「新着記事」、「アーカイブ(過去の記事)」は全て記述で表示しますが今はコピペがいいです。

 

検索フォーム

まずコーディングデータがあるフォルダの中にsearchform.phpを追加します。

赤枠の中にsearchform.phpを作ります

 

そしてsidebar.phpの15行目〜25行目を切り取ってsearchform.phpに貼ります。

「action=”http://localhost/wordpress2/”」の「http://localhost/wordpress2/」はあなたのサイトのURLを書いてください、違うURLを書くとエラーになります。

 

sidebar.phpの消した15行目〜25行目を<?php get_search_form();?>に変えて下さい。

 

これで検索フォームの完成で次は検索フォームが機能するようにします。

コーディングデータが入っているフォルダの中にsearch.htmlがありますがそれをsearch.phpにします。

そしてsearch.phpの内容を書き換えますが今までにやったことはやり方を説明しないので自分でやってみて下さい、最後に答えのコードは載せます。

まずはヘッダー(<?php get_header();?>)とサイドバー(<?php get_sidebar();?>)とフッター(<?php get_footer();?>)を作って下さい。

それができたらパンくずリストを作って下さい。

それができたらsearch.phpの<!–ここから1つの記事–>上に<?php if(have_posts()): while(have_posts()): the_post();?>を書いて<!–1つの記事ここまで–>の下に<?php endwhile; endif;?>を書いて下さい(ループを作るということ)。

それができたら1つの記事の中のリンクの設定と画像の表示と日付の表示とタイトルの表示をして下さい。

「内容の抜粋内容の抜粋・・・」と続いている部分は<?php the_excerpt();?>でできますがこれで抜粋した文章の表示ができます。

デフォルトの状態だと本文の最初から110字で長すぎるので文字数を50字に変えます。

functions.phpを開いて↓のコードを追加します。

 

全てが終わった時の解答のコードが↓です。

 

書いたらトップページに戻って検索窓で記事の名前で検索をして表示されているかの確認をして下さい、↓になっていたら大丈夫です。

「検索ワード」の部分にあなたが検索した語句が表示されます

 

新着記事

今の状態はコーディングの内容が表示されていますが新しい記事が表示されるようにします。

コーディングで表示している内容です

 

sidebar.phpの18行目〜48行目を↓にして下さい。

 

書き終わったらトップページに戻って下さい、↓になっていれば大丈夫です。

私が投稿した内容が表示されているので人によって表示される内容が違います

 

アーカイブ(過去の記事)

今はコーディングの内容が表示されています。

 

記事を投稿した月を表示できるようにしますがsidebar.phpの50行目と51行目を↓に変えます。

 

トップページに戻ってアーカイブの確認をすると↓になります。

あなたが記事を投稿した月が表示されます

 

カテゴリー

今はコーディングの内容が表示されています。

 

投稿した記事のカテゴリーを表示しますが66、67行目を↓にして下さい。

 

コードを書いたらトップページに戻ってあなたが設定したカテゴリーが表示されているかを確認して下さい。

私は「ニュースリリース」のみをカテゴリー名にしています

 

これでサイドバーの完成です。

ここまで記事を読んでくれてありがとうございました。