こんにちは、今回はWordPressのサイドメニューについて、触れていきます。

少しボリューム多めなので、20分くらいかけてゆっくり読んでください。

・「WordPressのサイドメニュー」とは

　サイドメニューとは、サイトの右側（左側や下の場合もあります）に表示されている、サイドバーの事です。

※当サイトですと、上記のような「検索フォーム」「最近の投稿」「広告」等を表示しています。

　今回はこのサイドメニューに、もうすでに作ってあるWebページを追加しようという記事です！

では、次回は簡単なメニューを追加していきましょう。

・簡単なメニューを追加

　WordPress では、初期設定の機能でサイドメニューを追加する事ができます。

1. 管理者アカウントでログイン
2. 管理メニューから「外観」→「ウィジット」を選択
3. そこから、表示させたい「ウィジット」を選択すると、簡単に追加する事ができます。※表示する順番は、右側の「ブログ用サイドメニュー」の中をドロップ&ドラッグすると、変更できます。

　こうする事で、WordPressのサイドメニューを追加できました。

次回は、WordPressで用意されていない、実際の「Webページ」を追加していきます。

ぜひ、ひと休憩とられてから、読んでみてください。

・HTMLソースを追加してみる

　前回に行った、「管理者メニュー」→「外観」→「ウィジェット」　へ移動してください。

続きまして「利用できるウィジェット」から、今回は「テキスト」を追加します。

「テキスト」はその名の通り、文字を画面に表示するウィジェットです。

※htmlは、html/text という種類の文字です。ですので「テキスト」を使います。

「ブログ用サイドバー」→「ウィジェットを追加」をクリックしてください。

すると、「ブログ用サイドバー」に、下記の「テキスト」を編集するメニューが追加されます。

「内容」欄に簡単なＨＴＭＬを書いてみましょう。下記をコピペしてください。

<h2>挨拶は一日の始まり</h2>
<p>おはよう<br>こんにちは<br>こんばんは</p>

「保存」ボタンを押し、ブラウザで確認してみます。

サイドバーに追加されました。（文字がおり曲がってしまっていますね（笑））

もちろん、この中に超複雑なhtmlソースを書く事もできます。

ですが、次回では「 iframe 」というタグを使い1行でWebページを表示していきます。

参考ＵＲＬ：WordPress ウィジェットの追加と編集方法

・「iframe」を使ってみる（あまりオススメしません）

　そもそも「 iframe 」って何？

iframe(アイフレーム)というのは、HTMLタグの一つで、インフレームという種類のタグです。

下のように、Webページ内で、違うWebページを表示する事ができます。

記述もすごい簡単で、1行だけで済みます。

<iframe src="https://testtesttest21.sakura.ne.jp/sample/jQuery_sample/Cropper/"></iframe>

src属性のＵＲＬを書き換えることで他のページも表示できます。※一部サイトは不可

では、このiframeタグを、ウィジェットに追加してみましょう。

「外観」→「ウィジェット」→「テキスト」

内容欄に、下記をコピペしてください。

<iframe src="https://testtesttest21.sakura.ne.jp/sample/jQuery_sample/Cropper/"></iframe>

ブラウザで確認すると、サイドバーに違うWebページが表示されました。

・ＣＳＳファイルを読み込ませる

　はい、気持ちを切り替えてやって行きます。

今回は「 iframe 」は使いません。

下記を、ウィジェットのテキストにコピペしてください。

<h2 class="h2_text_side">挨拶は大事</h2>
<p class="p_text_side">おはよう<br>こんにちは<br>こんばんは</p>

クラス名を追加しました。

次に、下記を「style.css」と名前を付け、お使いのサーバーにアップしてください。

※私の場合WordPressの保存場所の一つ上の階層にアップしましたが、場所は任意でＯＫです。

※ファイルは utf-8 Bom無し で保存してください。

.h2_text_side{
 color:red;
}

.p_text_side{
 color:blue;
}

内容は、文字の色を赤や青にするといった、簡単なスタイルシートです。

最後に、もう一度、ウィジェット テキストを開き、下記を追記します。

<link rel="stylesheet" href="https://ファイルをアップしたパス/style.css">

「保存」しブラウザで確認すると

文字の色が正常に変わっていればＯＫです。

どうでしょう。うまくいきましたか。

※CSSファイルは、絶対パスで読み込ませましょう。

　トップページからはCSSファイルを読み込めても、記事のページからは読み込めないというトラブルと回避する為です。

次回は jQuery や javascript といったJSファイルを読み込ませます。これまたコツがあります。

ぜひ、ひと休憩入れてから見てみてください。

・ＪＳファイルを読み込ませる

下記を「function.js」と名前を付け、サーバーの任意の階層にアップロードしてください。

※utf-8 Bom無しで保存してください。

$(function(){

	$('.h2_text_side').on('click',function() {
		$('.p_text_side').css('color','red');
	});

});

「挨拶は大事」という文章をクリックすると、下の文章の色が赤に変わるという、簡単なＪＳです。

そして、WordPress のウィジェット テキストに　下記を追記します。

<script src="https://ファイルをアップしたパス/function.js"></script>

「ファイルをアップしたパス」は書き換えましょう。

「保存」しブラウザで確認すると

・・・動きません。。。

ＪＳファイルを通常通り読み込ませると、WordPress では動きません。

WordPress では　「$」という文字が干渉して、ＪＳが正常に動かないのです。

ですので、JSファイルの１行目を、下記のように書き換えます。

jQuery(function($){

保存し、再度アップロードすると正常に動きます。

一癖ありますね(笑)

また、「 jQuery(function($){   });」で囲われた中では、「 $ 」マークは使えますので変更する必要がありません。

もっと詳しく知りたい方は、下記のサイトを見てみてください。

参考ＵＲＬ：「WordPressでjQueryのコードが動かない」場合の対処方法

・まとめ

　お疲れさまでした！うまくできましたでしょうか。

参考になれば幸いです。

先日、近所のプラネタリウムに行ってきました。

　リニューアルオープンしたようで、すごいキレイなプラネタリムでした。

プラネタリウムの機械って「意外と小さいんだ」と思っていたら、大迫力でビックリ！

プラネタリムは行った事ありますか？

　天井が丸くなっていて、全体に映像が映し出されるのですが、「あれ？今、床がうごいてんのかな？」と思うほど不思議な経験をしました🌟

途中、老人会で来ていたおじいちゃんが、いびきをかいて寝だすと、「クスクス」と笑い声が・・・

まっそういう事もありますよね。

　その博物館にある、かやぶきやねの建物。

いいですよね～。

気温が高かったですが、中に入るとひんやりとしていて、畳と炭の香りでリラックスできました。

刺激や笑いよりも、落ち着く場所や動物が好きな、31歳の夏でした。

ではでは、本当にお疲れさまでした。

・今回の記事を書くにあたって参考にしたサイト

参考ＵＲＬ：WordPress ウィジェットの追加と編集方法

参考ＵＲＬ：「WordPressでjQueryのコードが動かない」場合の対処方法

参考にさせて頂いたサイトの管理者様、今回もありがとうございました。