ワードプレスでグローバルメニューを作る

ワードプレスを構築したら、読者さんが便利に使えるように、
グローバルメニューを作りたいですね。

グローバルメニューとはこれのこと。

グローバルメニュー

グローバルメニュー、もしくはメニュー、
グローバルナビゲーション(略してグローバルナビ)とも呼ばれています。

グローバルメニューは、お使いのワードプレステーマ(テンプレート)によって
あらかじめデザインされているものと、デザインされていないものがあります。

また、ワードプレスの管理画面から簡単に設定できるタイプと、
グローバルメニュー自体はデザインされているんだけど、
管理画面から編集できず、phpファイルを手で編集しなきゃいけない、
というテンプレートもあります。

ワードプレスの管理画面上で簡単にグローバルメニューが編集できるようになったのは
2012年前後あたりからだったと思いますので、
それ以前にリリースされたテンプレートはphpを編集しないといけないかもです。
その際には、お使いのテンプレートの配布元などで詳しい手順をご確認ください。

ですから、例えば、このサイトでも利用している賢威テンプレートの場合、
今着せているのが賢威6.1。これは比較的新しくて、
ワードプレスの管理画面から簡単にグローバルメニューを編集できる、
いわゆる「カスタムメニュー」ってやつに対応しています。

ただし、一つ前の賢威5.0というシリーズは
まだカスタムメニューが導入される前にリリースされたテンプレートなので
残念ながらグローバルメニューはあるけれど、
自分でphpファイルをカスタマイズしなきゃいけないという手間がかかります。

※賢威5.0でphpを編集してグローバルメニューを作る方法は
 「賢威でWordPress~グローバルメニュー設定方法」ここで解説してます。

ちなみに、今の賢威6.0以降のシリーズでは、
グローバルメニューを簡単に設定できるほか
グローバルメニューそのものを表示させない設定もボタンひとつという手軽さ。

特に、アドセンスを扱うサイトでファーストビューを気にする際には
選択肢の一つとして考えてもいいかもです。

んで、グローバルメニューがそもそもデザインされてない場合は
デザインされているテーマに着せ替えた方が早いし、
phpを編集するタイプはテーマによってどこをいじるか千差万別なので割愛。

ここでは、ワードプレスの管理画面から、
グローバルメニューを簡単に設定する方法を見ていきます。

固定ページを作ればOK

ワードプレスの記事投稿には、「投稿」と「固定ページ」の
2種類の記事投稿方法があります。

ま、投稿記事と固定ページの違いという記事でも解説してますので
詳しくはそちらを読んでいただけたら、です。

そこでも解説していますが、投稿ページってのは通常のブログ記事、
固定ページってのは、ちょっと特殊な記事のために使います。
サイトマップや問い合わせなどといったものですね。

こういった「ちょっと特殊なページ」を固定ページで作成すると、
自動的にグローバルメニューに反映されます。

このカスタマイズも後で解説しますね。

ってことで、要するに、固定ページを作れば自動的にメニューができる、
とまぁ、そういうことなんですよ。以上、おしまい。

ね?簡単でしょ?

とはいえ、順序を変えたいとか表示させたくないページがあるとか
固定ページ以外のURLを表示させたいとか、いろいろありますよね。

そういうのを細かく見ていきましょう。

グローバルメニューを設定する

では、そもそもグローバルメニューをどう設定すればいいか、
設定画面を確認しましょう。

gm02

このように、「外観」→「メニュー」と進みます。

gm03

多分、こんな感じになってるかな~・・・と。(画像クリックで拡大)
この、赤線の部分に分かりやすい名前を付けます。
正直、自分さえ分かればいいので名前は何でもいいです。

適当に名前を付けたら「メニューを作成」をクリック。

gm04

多分、こうなる。

gm05

まずは、ここが空白のはずなので、
枠の右側にある▼をクリックして今作成したメニューを選んでみてください。

gm06

選んだら忘れずに保存しておいてね。

gm07

図のように、グローバルメニューに載せたいページに
チェックを入れて「メニューに追加」をクリックしてみましょう。

gm08

こんな感じでボワッと追加されますので
「メニューを保存」をクリックして保存します。

グローバルメニューの並び順序を変えたい

gm09

メニューの項目を並び替えたい時には、
その項目をマウスでぎゅーっと移動させるだけで
自由に順序を入れ替えることができます。

並び替えたあとは保存を忘れずに!

勝手にワードプレスのメニューが増えて困る!というとき

固定ページが自動的にメニューに反映される場合、
固定ページが増えれば勝手にメニューが増えてしまって
なんだかワケが分からないくらいにぐちゃぐちゃになることがあります。

これは、設定ひとつで直ります。

gm10

この、「トップレベルのページを自動的に追加する」という項目の
チェックを外せばOK。

「トップレベルのページを自動的に追加する」を直訳すると、
トップレベルの(一番新しく追加された)ページ(固定ページのこと)を
自動的に(グローバルメニューに)追加する、という意味です。

ここにチェックが入っていれば、新しい固定ページができれば
問答無用でグローバルメニューに追加しますよ、

ここにチェックを入れていなければ、
新しい固定ページができようがどうだろうが、
あなたが自分でメニューの設定をしない限り反映しませんよ、ってこと。

ですから、基本的にはチェックを外し、
自分で今まで見てきたように表示させたいページだけを選んで
グローバルメニューに追加していくほうが便利でストレスがないです。

あ~~!!間違えた!この項目を削除したい!

追加したメニューを削除したい場合、
(例えば「お問い合わせ」や「サイトマップ」をメニューから外したいなど)
メニューに追加した各項目の詳細設定から削除が可能です。

gm11

各項目の右端にある▼をクリックすると画面が開きますから
図のように「削除」をクリックすればOK。

ここでいう削除は、グローバルメニューから削除するという意味であり
記事そのものがなくなってしまうという意味ではありません。

ってか、タイトルが長すぎてはみ出る・・・

固定ページの記事タイトルが長すぎてグローバルメニューに追加したら
ミョーにはみ出てしまう場合、記事タイトルはそのままに
メニューの表示だけ短く変更することができます。

gm13

こんな風に、ミョーに長い記事タイトルを付けてしまった場合でも、
タイトルはそのままにメニューの表示だけ変更可能。

gm12

メニューにトップページや他サイトなどを入れたい

グローバルメニューにトップページへもどる表示や
他のサイトへのリンクを表示させたい場合。

gm14

こんな風に、「カスタムリンク」に直接URLを記載してやればOK。

これで、ブログのトップページでも他のサイトでも
自由に誘導することができるようになります。

ただし、残念ながら、別窓で開く表示を設定できないため、
他サイトへの誘導の際は同一ウィンドウで表示されます。

その他の注意点

ワードプレスのテーマ(テンプレート)によっては、
今まで見てきたカスタムメニュー機能を使って、
フッターやサイドバーなどを自由に設定できるものがあります。

その際には、ご利用のテンプレートの説明書を確認していただければなのですが
基本的な考え方は今までと一緒で、
新しくメニューを作成する→フッターなりウィジェットなりに反映させる、
という手順になりますよ^^

メールの不達が出ています

メールの不達が出ています

12月26日にメールを下さった、海外在住のKさん、
こちらからメールをお送りしたら返ってきてしまいました。

もしよければ再度メールアドレスをお確かめの上メールください!

ただ、お問い合わせの内容に関して、
他にも同じように思っておられる方も多いと思うので書いておきますね^^

SIRIUSと賢威ってどう違うの???

賢威とシリウスですが、賢威は、そもそもがテンプレートなんです。
逆に、シリウスはサイトを作るためのソフトですね。

どう使い分けるか、ですけど、
例えば、私のメインブログ http://moririn.net/ これですね。

これは、ワードプレスというブログソフトを使って作っているブログです。
このブログのデザインをつかさどっているのが賢威というテンプレート。

ワードプレスは、本来ならホームページを作るためのサーバーに、
インストールしてやることでブログとして使えるようになるソフトのことで、
先ほどの私のブログのように記事をたくさん書いて大きく育てるときに使います。

本来ならホームページを作るはずなんだけど、
ホームページって、無茶無茶面倒くさいんです><

1ページ新しいページを追加しようと思ったら、
新しいhtmlファイルを用意し、タグを記述し、他のページとリンクでつなげ・・・と、
面倒くさすぎて気持ち悪くなるくらい厄介な作業が必要なのですが、

ワードプレスを使うとブログ形式にしてくれるので
記事を書けば勝手に新しいページができるし、
カテゴリーで記事を分類してくれるし・・・と、とても楽チンになります。

毎日更新し続けて育てていくなら、毎日の手間が楽な方がいいですよね^^

ただ、ワードプレスはインストール自体は無料ですが、
ワードプレスを設置するサーバーやドメインなどの経費は必要です。
まぁ、サーバーやドメインはSIRIUSでも必要ですが。

それと、ワードプレスは初期設定がちょっと面倒です。

最初だけなのでずっと面倒というわけではないですけどね。
気軽にぽんぽん新しいブログを作る・・・のは面倒かも。

最初は面倒な初期設定がいるけど(ってほど面倒でもないですがw)
一回やってしまえばあとは楽チンで、
毎日更新して大きく育てていくのがワードプレスブログです。

対して、こんな風に、 http://moririn.net/keni/ 
ちょこっとしたページをぽんぽん作りたいってことがあります。

おっしゃるようにランディングページを作ったり、
先ほどのようなレビューページを作ったり。

そういうページって、じっくり毎日更新して育てていくわけでもなく、
面倒な初期設定なんていらないからとにかく手軽にぽんぽん作りたいですよね。

どうせ1ページものの小さなサイトですし、
手間をかけずに今すぐちょこちょこっと作ってしまいたい。
当然、ワードプレスみたいな面倒な初期設定なんてやっていられない。。。

そんなときに強いのがSIRIUSです。

SIRIUSはhtmlサイト作成ツールです。
普通のホームページを作るためのツール、ですかね。

ホームページビルダーのアフィリエイト専用バージョン、みたいなものです。
ビルダーよりははるかに使いやすいですけどね。

ほぼ直感的な操作だけで綺麗なサイトが出来上がりますから、
ああいったちょっとしたサイトなら文章を考える時間を除けば10分もあればOK。

手軽に、小さなサイトを作るときに適しています。

この、ワードプレスとSIRIUSはそもそもが役目も違うし
求められるものも違うので、両方を使い分けながら運営するのが一番です。

ただ、ワードプレスの場合、賢威を使うと見た目も綺麗なブログができるし、
非常に検索エンジンに優しいので多少有利に働きますが、
ワードプレステンプレートだけなら他にも代替品はあります。

例えば、私からお買い上げのときに特典でお渡ししている
「リファイン」などのワードプレステンプレートも優良ですしね。

その点、SIRIUSの代替ツールはあのレベルのものはないですので
どちらかひとつ、であればSIRIUSの優先順位のほうが高いと思います。

賢威はあとからでも着せ替えられますしね。

賢威について詳しくはこちら

SIRIUS(シリウス)について詳しくはこちら

※ どちらももりりんのサポート対象商品です。

それから、賢威もSIRIUSも、海外からでも使えます。
Win7くらいのスペックがあるのであればまず問題ないです。

ただ、お住まいの国によってはインターネットの環境で
すこし手がかかるケースがあります(中国など)

でも、アメリカや韓国などであればまず問題はないでしょう。

Kさん、メール待ってます^^

賢威6.1~背景色とカラム部分の色を変える

あんまりかっこいいとは思わないんだけど、
一応こういうことも簡単にできます。

kenis7

みて。
サイトの背景の色と、メインカラム、サイドバー部分の色を変えてます。

この設定方法ね。

まずは、「外観」⇒「テーマ編集」と進み、
「design.css」を開きます。

keni613

この、一番上の記述なんだけど、

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #a9a9a9; }

もしくは、マネー版みたいに、
うっすら背景に模様(斜線)が入っているようなタイプは

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9;
}

* html #container{ background: #a9a9a9; } /*IE6*/

こうなっていると思います。

この記述の下に、こんな記述を書き足します。
赤い文字の部分のカラーコードは任意です。

#main-contents {
background-color: #fff;
}
.sub-column {
background-color: #fff;
}

全部書き足したマネー版の場合はこうなります。

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9; ← 全体背景の色
}

* html #container{ background: #a9a9a9; } /*IE6*/ ← 全体背景と同じカラーコードにする

#main-contents {
background-color: #fff; ← メインカラム部分の背景色
}
.sub-column {
background-color: #fff; ← サイドバー部分の背景色
}

この3箇所を好みの色にそれぞれ変えてやります。

ただし、賢威6.1は、
基本的にサイト全体の文字色を、一括で大きく指定してしまっているので、
メインカラムとサイドバーで極端に背景色を変えた場合、
メインカラム用とサイドバー用に、それぞれ、文字色を割り当ててやらないといけません。

黒い文字なら全部が黒、白い文字なら全部が白。
いちいち細かく文字色を変えるにはそれなりに設定がいるからね!!

賢威6.1~「最新情報」のカスタマイズ

賢威6.1では、最新の投稿記事表示がこんな感じになってます。
まずは、これがデフォルト。

kenis1

で、こっちがタイプ2.

kenis2

この設定は、ワードプレスの管理画面で簡単に切り替えられます。

kenis3

ただ、ですね。。。
やっぱ、トップページは情報量が多いし、こうしたいわけですよ。

kenis4

この設定方法。
まずは、「賢威の設定」で、最新情報をタイプ1にしておいてくださいね。

kenis5

んで、ワードプレスの「外観」⇒「テーマ編集」⇒「index.php」へと進みます。

kenis6

この中から、<!–▽メインコンテンツ–>という箇所を探します。
で、この中の、

<!–最新情報–>~~~~~<!–/最新情報–>

この中にある、こんな記述を探します。

変更前
<?php newposts_keni(5,5,1,”year”); ?>
</dl>

変更後
<?php newposts_keni(5,5,0,”year”); ?>
</dl>

この赤い文字の部分を「0」にすればOK。

ただ、私のメインブログで使っている「マネー版」では、
この記述がありませんでした。

その代わりに変更した記述が、

変更前
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,1,”year”,0,the_keni(‘new_info’)); ?>
</dl>

変更後
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,0,”year”,0,the_keni(‘new_info’)); ?>
</dl>

これですっきりです♪

賢威6.1~ブログ説明文の文字色を変えたい(ついでに編集もしたい)

keni617

ヘッダー画像に入るブログ説明文の文字色変更とテキスト編集。

最初の状態はこれ。

keni618

あ~~テキストの色が合ってないし、
お姉さんの画像に被っちゃってるね。

まずは、テキストの文字色変更から。

keni613

「外観」⇒「テーマ編集」⇒「design.css」と進み、
以下の記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

この中の、

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
margin-top:25px;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #000;
}

この部分を変更します。

「#000」で黒、「#fff」で白。
他にも、カラーコードで自由に設定できるので、
作ったヘッダー画像に合わせて色を変えてみてくださいね。

ついで、あのテキストを編集。
あそこに入れる文字の編集ですね。

コイツは簡単。

keni619

ワードプレスの設定で変更可能です。

ただし、今までの賢威5.0とかだったら、
phpの記述の中に直接テキストを書き込んでいたので、
「改行」が使えたし、リンクなども使えましたが、
ワードプレスのキャッチコピーを直接持って来るので改行などのタグは使えません!

賢威6.1~ヘッダー画像の上下幅を変えたい

賢威6.1マネー版で、ヘッダーに画像を設定した場合、

keni615

このヘッダーは半分くらい真っ白なので見えにくいかもだけど、
ヘッダー画像の上部、と、ヘッダー画像とグローバルメニューの間、
要は、ヘッダー画像を挟んで上下のスキマが広いので、
細めのヘッダー画像を作っても、ちょっとヘッダーが大きくなりすぎな気がします。

まぁ、ヘッダーを目立たせて出オチを狙うってのもありかもですが、
そういうのはランディングページの役目であって、
コンテンツ重視のメインブログのヘッダーが異常に派手なのはいけすかない・・・

サイトが立ち上がった瞬間、読者さんの受ける印象として、
ヘッダー「だけ」ってのもねぇ。。。Σ( ̄Д ̄;)

ここにさらにイメージ画像を入れてしまうと、
サイトが立ち上がったとき、まるっきりコンテンツ部分が見えなくなってしまうでしょ?

それではメインブログとしてちょっと・・・

あと、PRIDEみたいにアドセンスを利用する場合、
ヘッダーが勝ちすぎて、ヘッダーとアドセンスしか見えない状態だと、
アドセンスの警告対象にもなってしまうので注意です。

ま、最初に見たとき、PCの画面半分くらいがヘッダーで埋め尽くされてて、
「あぁ、こりゃしつこいわ・・・」と思ったのがきっかけで、
ヘッダー画像を細く作り直したり、いろいろしたんだけど、

根本的にヘッダー画像の上下の余白が大きすぎるんだ!
という責任転嫁で自分を納得させ、じゃぁ、あの幅を縮めよう!
ってなことでやってみました。

「外観」⇒「テーマ編集」から、「design.css」へ進みます。

keni613

その中から、下記のような記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #ffffff;
font-size: 1.2em;
}

* html #header{ background: #ffffff; } /*IE6*/

#header-in{ padding: -1em 0; } ← ここがヘッダー画像のすぐ上の幅

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em; ← ここがヘッダー画像のすぐ下の幅
font-size: 2.167em;
}

私はヘッダー画像のすぐ上の幅を「-1」にして、
ヘッダー画像のすぐ下の幅を「0.2」にしています。

keni616

なんか、すっきりした感じ♪

ワードプレス3.5で画像が挿入できない

これ書いているのが2013年9月だし、
世の中すでにワードプレス3.6.1が・・・なんて感じなのに、
今さらこんなことでつまづいた私って・・・_| ̄|○ il||li

もう、半年振りくらいかもなんだけど、
ワードプレスのブログ記事に画像を挿入しようと思ったら、

keni614

ぽちっとな・・・あれっ???
ぽちっとな!!

あれあれあれあれ??????

ぽちっとな!!!!!

・・・・・・効かない。。。((((;゚Д゚))))

いくらクリックしても画像が挿入できないの。
うん???

でも、メディアアップロードはちゃんとできているし、
画像そのものはアップロードされているのに、あのボタンだけが効かない・・・

で、調べてみたら、「wp-config.php」の一番最下部に、

define(‘CONCATENATE_SCRIPTS’, false );

って書けばいいらしい、ってのを発見し、ふむふむなるほど・・・ってわけで、
私も「wp-config.php」に書きこもうとテーマ編集を見てみたら・・・

(ノ∀`*)ンフフ♪ > 賢威に「wp-config.php」なんて無かった、アハハ・・・ハァ

あらら。
まいったな。。。

んで、もうチョイ調べてみたら、
「Custom Field Template」というプラグイン、
またはその類似プラグインなどが怪しい、というのを発見!

「Custom Field Template」を停止させて無事解決したのでした。

んで、賢威6.1もそうだけど、
記事ごとにカラム切り替えするのに今さらプラグインなんて要らないっす。

ただ、ですね。
今もアフィリエイト特典などで広く配布している
「EFFICIENT」というテンプレート。

これを使うときに、「Custom Field Template」をインストールせよ、
というのがEFFICIENTの解説サイトで出てきます。

このテンプレートが出回った当初は、まだワードプレスもそこまで進化してなく、
だから、プラグインで足らない機能を補っていたんだけど、
あれから数年たって、目覚しい進化をしてきた今のワードプレスには
要らないんだねってことで。

もし、過去に「EFFICIENT」を入れていたことがある場合、
「Custom Field Template」というプラグインは停止しないと、ですね。

入れておきたい便利なプラグイン「WP-Cumulus」

「WP-Cumulus」は、こんな3Dタグボックスを表示してくれるプラグイン。
[wp-cumulus]

クールなタグボックスが設置できます。
もちろん、日本語対応もでき、色やサイズを変えることも可能。
回転速度など、細やかなカスタマイズができます。
続きを読む

引用「枠」の常識と常識に負けない「枠」を作る

ワードプレスのエディタには、最初から、「blockquote」という、
引用枠が用意されています。

一般的には、グレーの四角い枠ができて、
引用した文章を囲んで表現するんです。
このサイトでは、色や枠を変更してあります。
続きを読む