第4回「WordPressのサイドメニュー」Webページを追加

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

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

 

目次

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

・簡単なメニューを追加

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

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

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

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

・まとめ

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


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

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

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

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

 

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

 


・簡単なメニューを追加

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

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

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

 

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

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

 

 


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

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

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

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

 

参考URL:WordPress ウィジェットの追加と編集方法


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

 そもそも「 iframe 」って何?

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

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

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

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

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

 

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

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

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

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

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

 

 

なぜ、オススメできないのかここ飛ばしてもOKです)

 「 iframe 」タグは近いうち無くなる。という間違った噂が流れています。

インフレームと呼ばれる種類の「 object 」や「 video 」も無くなりません。

 

 何も根拠がないのに、「 iframe 」はダメだ。という日本人がいます。

その為、周りの人も影響を受けて、何も根拠がないのに「 iframe はダメだ 」と口にします。

理由は?と聞くと、「 ~~さんが言ってったから 」

何も根拠がありません。

しかし、その人の周りの人も影響を受けてしまい、「 iframe はダメだ 」と口にします。

 

 その為、「 iframe 」タグは、現場で敬遠されてしまいます。

何も根拠がないのに・・・

「 iframe 」っていう素晴らしい技術を守りたいです。

(2018年7月時点)

 


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

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

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

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

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

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

 

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

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

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

.h2_text_side{
 color:red;
}

.p_text_side{
 color:blue;
}

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

 

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

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

 

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

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

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

 

 

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

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

 

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

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

 


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

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

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

$(function(){

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

});

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

 

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

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

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

 

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

・・・動きません。。。

 

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

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

 

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

jQuery(function($){

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

一癖ありますね(笑)

 

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

 

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

参考URL:「WordPressでjQueryのコードが動かない」場合の対処方法


・まとめ

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

参考になれば幸いです。

 

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

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

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

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

 

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

 

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

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

 

 

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

いいですよね~。

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

 

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

 

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


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

参考URL:WordPress ウィジェットの追加と編集方法

参考URL:「WordPressでjQueryのコードが動かない」場合の対処方法

 

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

,,,,,,

Comments

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です