第4回「WordPressのサイドメニュー」Webページを追加
こんにちは、今回はWordPressのサイドメニューについて、触れていきます。
少しボリューム多めなので、20分くらいかけてゆっくり読んでください。
目次・「WordPressのサイドメニュー」とは ・簡単なメニューを追加 ・HTMLソースを追加してみる ・「iframe」を使ってみる(あまりオススメしません) ・CSSファイルを読み込ませる ・JSファイルを読み込ませる ・まとめ ・今回の記事を書くにあたって参考にしたサイト |
・「WordPressのサイドメニュー」とは
サイドメニューとは、サイトの右側(左側や下の場合もあります)に表示されている、サイドバーの事です。
![]() |
※当サイトですと、上記のような「検索フォーム」「最近の投稿」「広告」等を表示しています。
今回はこのサイドメニューに、もうすでに作ってあるWebページを追加しようという記事です!
では、次回は簡単なメニューを追加していきましょう。
・簡単なメニューを追加
WordPress では、初期設定の機能でサイドメニューを追加する事ができます。
- 管理者アカウントでログイン
- 管理メニューから「外観」→「ウィジット」を選択
- そこから、表示させたい「ウィジット」を選択すると、簡単に追加する事ができます。
※表示する順番は、右側の「ブログ用サイドメニュー」の中をドロップ&ドラッグすると、変更できます。
こうする事で、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
ありがとうございました。