Simplicityでグローバルメニューを作る~PC,スマホ両方で表示


ワードプレス(Simplicityのテーマ)でグローバルナビを表示する方法

ブログのカテゴリーを上に持ってきて、サイトを訪れた人にジャンル別の記事にアクセスしやすいようにする、この表示の方法をグローバルメニューもしくはグローバルナビゲーションと言います。

ワードプレスでグローバルメニューを表示する方法は、とても簡単です。

管理画面であるダッシュボードの「外観」「メニュー」

に行きます。

そこから新規メニューを作成します。

メニュ―名に「グローバルメニュー」と書いて、メニューを保存をクリック。

左の「カスタムリンク」をクリックして、URLにブログのトップページのアドレスを書き、リンク文字列に<HOME>と書き、メニューに追加します。

次に左のカテゴリーをクリックして、グローバルメニューに加えたいカテゴリーにチェックを入れ、追加してやれば完成です。

以上はPCサイトでのグローバルメニューの表示です。

スマホサイトは、デフォルトでは表示されません。

スマホでグローバルメニューをPCサイトのように表示する方法は以下のようにやれば出来ます。

ワードプレス(Simplicity)のスマホサイトでグローバルメニューを表示させる方法

参考にしたのはこちらのサイトです。

「外観」タブから「テーマの編集」へと進みます。

子テーマがある人は子テーマに、なければ親テーマに記述を加えます。

before-main.php

を開く。

そして以下の記述を探します。

例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>

この下に次の記述を貼り付けます。

<?php if ( wp_is_mobile() ) : ?>

<div id=”sm_nav”>
<span class=”category”><a href=’http://aaaa/’>カテゴリー1</a></span>
<span class=”category”><a href=’http://bbbb/’>カテゴリー2</a></span>
<span class=”category”><a href=’http://cccc/’>カテゴリー3</a></span>
<span class=”category”><a href=’http://dddd/’>カテゴリー4</a></span>
</div>

<?php else: ?>
<?php endif; ?>

aaaaにはそのカテゴリーのアドレスです。PCサイトで表示されているグローバルメニューの各カテゴリーをクリックすれば出てきます。

それを貼り付けます。カテゴリー1にはその名前を書くだけです。

以下、bbbbもccccも同様に行います。

次にテーマのスタイルシートを開きます。

そこの一番下に、

#sm_nav{
text-align: center;
}
#sm_nav .category{
background-color: #35A6A0;
padding:8px;
line-height: 230%;
font-size:90%;
border-radius: 4px;
}
#sm_nav a{
color: #FFFFFF;
text-decoration: none;
word-wrap: break-word;
}

を加えます。

すると、スマホサイトの上部にグローバルメニューが表示されます。

文字の大きさや、文字間隔などは、font-size、paddingの数字を変えて調節してみてください。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする