supote blog

ブログサイト日々精進中!過去記事のリライトは少しずつ行なっていくのでお待ちください

STINGER8 WordPress ブログ技術 固定メニュー

[WordPress] スマホのサイドバー有効活用!サイドバー折りたたみ式「sidr.js」

投稿日:2020年6月29日 更新日:

今回はsidr.jsを使った横から出てくるサイドバー「折りたたみ式」と

前回の固定メニューをアップグレードさせます。

スマホのユーザアビリティーを高め、直帰率を低くしていくのが狙いになります。

今回はSTINGER8の場合どうすればいいのかの備忘録です

参考にして導入してみてください!

参考にしたサイト https://nelog.jp/wordpress-sidr
無料の有名なテーマSimplicityやCocoonの制作者のサイトです。
スポンサーリンク

前提条件

使用テーマ

・STINGER8(他のテーマでもおそらく可能)

使用機材

・FTPソフト or ターミナル等のssh、scpコマンドの使用

・sidr.js

確認した機種

・iPhoneXs

注意事項

バックアップを必ず取ってからやるようにお願いします

完成形

PCでは変わらないようにして、スマホなるようにしています

スマホ画面

ナビゲーション通常の画面サイドバー
スポンサーリンク

PC画面

pc画面では反応しないように設定しています

スポンサーリンク

一週間使用してみた変化

一週間前 約一週間後

確実に上がっていますね。今まで使用できていなかったサイドバーの活用が役に立つとは、、、次回以降サイドバーの中身も良いものに変更していきます

手順

sidr.jsのダウンロード

sidrのファイルをインストールします。URLはこちらから

ファイルのアップロード

sidr-X.X.X.zip(Xにはversionの数字)を解答して

1.jquery.sidr.min.js

2.jquery.sidr.dark.css または  jquery.sidr.light.css

(cssはお好きなテーマを選んでください)

ファイルの場所
・distの中にjquery.sidr.min.js
・distの中のstylesheetsの中にjquery.sidr.dark.css light.cssが存在する

STINGER8の子テーマ内に以下のようにファイルをアップロードする

css/jquery.sidr.dark.css
css/sidr-menu.css(オリジナルcss:参考記事引用+一部改変)
js/jquery.sidr.min.js

参考記事が2016年ため

jquery.sidr.dark.min.cssが昔のバージョンではなかったと思われます。

アップロードするcssファイルはjquery.sidr.dark.min.cssでも問題ない可能性もあります。

しかし、参考記事通りの物を再現したいので、記事の形式に合わせ今回はjquery.sidr.dark.cssを使用しています。

cssファイルを呼び出す

子テーマに設置しただけでは、cssは反応しません。

以下の内容を<head></head>の中に書いてください。

(子テーマのheader.phpの中に書き込みます。)

<?php if ( wp_is_mobile() ): ?>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/jquery.sidr.dark.css">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/sidr-menu.css">
<?php endif; ?>

黄色の部分はSTINGER8の方は既に呼び出されているので読み込む必要はありません

jQueryコードの記述

/bodyのタグ前に以下のソースコードを記入してください。

/bodyはfooter.phpの中にあります。必ず子テーマのファイルに書き込んでください。

<?php
////////////////////////////////////////
// ボタンやSidrの実装部分
////////////////////////////////////////
if ( wp_is_mobile() ): ?>
<!– 検索フォーム –>
<div id=”mobile-search-box”>
<?php get_template_part(‘searchform’); ?>
</div>
<!– フッターメニュー –>
<div id=”footer-mobile-buttons”>
<a id=”footer-button-menu” href=”#navi”>
<div class=”menu-icon”><span class=”fa fa-bars”></span></div>
<div class=”menu-caption”>Menu</div>
</a>
<a id=”footer-button-search” href=”#”>
<div class=”menu-icon”><span class=”fa fa-search”></span></div>
<div class=”menu-caption”>Search</div>
</a>
<?php //前後の記事を取得
$prevpost = get_adjacent_post(false, ”, true); //前の記事
$nextpost = get_adjacent_post(false, ”, false); //次の記事
if ( is_single() )://投稿ページのとき ?>
<?php if ( $prevpost )://前の記事があるとし ?>
<a id=”footer-button-prev” href=”<?php echo get_permalink($prevpost->ID); ?>” title=”<?php echo get_the_title($prevpost->ID); ?>”>
<div class=”menu-icon”><span class=”fa fa-arrow-left”></span></div>
<div class=”menu-caption”>Prev</div>
</a>
<?php endif ?>
<?php if ( $nextpost )://次の記事があるとき ?>
<a id=”footer-button-next” href=”<?php echo get_permalink($nextpost->ID); ?>” title=”<?php echo get_the_title($nextpost->ID); ?>”>
<div class=”menu-icon”><span class=”fa fa-arrow-right”></span></div>
<div class=”menu-caption”>Next</div>
</a>
<?php endif ?>
<?php endif;//is_single ?>
<a id=”footer-button-go-to-top” href=”#”>
<div class=”menu-icon”><span class=”fa fa-arrow-up”></span></div>
<div class=”menu-caption”>Top</div>
</a>
<00>
<div class=”menu-icon”><span class=”fa fa-outdent”></span></div>
<div class=”menu-caption”>Sidebar</div>
</a>
</div>

<!– Sidrスクリプトの呼び出し –>
<script src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sidr.min.js”></script>

<script>
jQuery(document).ready(function() {
//ページトップへスクロール移動する
jQuery(‘#footer-button-go-to-top’).click(function(){
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
});

//モバイルの検索フォーム動作
jQuery(‘#footer-button-search’).click(function(){
if (jQuery(‘#mobile-search-box’).css(‘display’) == ‘none’){
jQuery(‘#mobile-search-box’).fadeIn(‘normal’);
jQuery(‘#footer-button-search .menu-icon span’).
removeClass(‘fa-search’).addClass(‘fa-times’);
} else {
jQuery(‘#mobile-search-box’).fadeOut(‘normal’);
jQuery(‘#footer-button-search .menu-icon span’).
removeClass(‘fa-times’).addClass(‘fa-search’);
}
});

//検索リンククリック動作をキャンセル
jQuery(‘a#footer-button-search’).on(‘click’, function(e){
e.preventDefault()
});


//Sidrメニュー表示
jQuery(‘#footer-button-menu’).sidr({
name: ‘navi‘,
side: ‘left’,
onOpen: function(name) {
jQuery(‘#footer-button-menu .menu-icon span’).
removeClass(‘fa-bars’).addClass(‘fa-times’);
},
onClose: function(name) {
jQuery(‘#footer-button-menu .menu-icon span’).
removeClass(‘fa-times’).addClass(‘fa-bars’);
},
});
jQuery(‘#footer-button-sidebar’).sidr({
name: ‘sidebar‘,
side: ‘right’,
onOpen: function(name) {
jQuery(‘#footer-button-sidebar .menu-icon span’).
removeClass(‘fa-outdent’).addClass(‘fa-times’);
},
onClose: function(name) {
jQuery(‘#footer-button-sidebar .menu-icon span’).
removeClass(‘fa-times’).addClass(‘fa-outdent’);
},
});
});
</script>
<?php endif; ?>

完全に参考記事と同じ内容のコードになります

変更する場所

変更する場所がわかりにくい場合

Windowsの場合は control+F

Macの場合は command+F

を押してワード検索をして探しましょう!

その1

<a id=”footer-button-menu” href=”#navi“>
<a id=”footer-button-sidebar” href=”#sidebar“>

「#navi」と[#sidebar]を使用するテーマのサイドバーIDを記入します。

STINGER8の方は「#s-navi」と「#side」でOKです。

その2

左から出てくるメニューと右から出てくるサイドバーの設定を行います。

jQuery('#footer-button-menu').sidr({
  name: 'navi',
  side: 'left',
  onOpen: function(name) {
    jQuery('#footer-button-menu .menu-icon span').
      removeClass('fa-bars').addClass('fa-times');
  },
  onClose: function(name) {
    jQuery('#footer-button-menu .menu-icon span').
      removeClass('fa-times').addClass('fa-bars');
  },
});

jQuery('#footer-button-sidebar').sidr({
  name: 'sidebar',
  side: 'right',
  onOpen: function(name) {
    jQuery('#footer-button-sidebar .menu-icon span').
      removeClass('fa-outdent').addClass('fa-times');
  },
  onClose: function(name) {
    jQuery('#footer-button-sidebar .menu-icon span').
      removeClass('fa-times').addClass('fa-outdent');
  },
});

黄色い部分を変更する必要があります。

STINGER8の方は「navi」を「s-navi」に、「sidebar」を「side」に変更してください

このIDがうまく割り当てられていないとSidrは動作しないみたいです。

実際IDが正しくないとき動作しませんでした。

cssの調整

左右のメニュー画面の幅を大きくする

注意
独自に変更した部分なので正しくなるか保証致しかねます。バックアップを取ってからお願いします。

私が変更した点としてはcss/jquery.sidr.dark.cssファイルの一部修正しました

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 15px;
  background: #333;
  color: #fff;
  box-shadow: 0 0 5px 5px #222 inset;
}
.sidr .sidr-inner {
  padding: 0 0 15px;
}
.sidr .sidr-inner > p {
  margin-left: 15px;
  margin-right: 15px;
}
.sidr.right {
  left: auto;
  right: -300px;
}
.sidr.left {
  left: -300px;
  right: auto;
}

黄色い部分のように300pxに変更いたしました

スポンサーリンク

最後に

今回の設定によりサイドバーの活用がよりできた気がします。

「前の記事のボタン」「後の記事のボタン」に魅力を感じないため、Twitterのリンク&記事のシェアボタンなどに変更してみようかなと思っています。

スポンサーリンク

-STINGER8, WordPress, ブログ技術, 固定メニュー

執筆者:


comment

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

関連記事

6月4日のブログ発展[日記]

目次1 固定ページについて1.1 固定ページを作成1.2 ssh接続設定1.3 固定ページのサイドバー削除1.4 固定ページフッターの固定記事一覧削除1.5 固定ページにカテゴリー新着記事一覧表示2 …

フッターの固定ページ一覧削除[STINGER8]

目次1 前提条件2 ファイルのダウンロード3 ファイルの編集3.1 フッターメニュバーの削除4 ファイルのアップロード フッターに固定ページ一覧が載っているのが嫌だったので消すことにしました。 前回の …

はてなブログはやめとけ!「Google Adsense]審査通過まで道のり

目次1 Google Adenseに通過までの流れ1.1 概要1.2 審査について1.3 Adsense,Analyticsなどの設定1.4 10万PV&100記事1.5 はてなブログは無理1 …

[WordPress] スマホ画面下に固定メニューの追加方法「プラグイン」

目次1 プラグインを使ったメニュー1.1 プラグインの追加1.2 メニューの設定1.3 項目を何個にするか1.4 リンク先の登録1.5 アイコンの設定1.6 メニューの幅や色の設定 テーマSTINGE …

[WordPress]STINGER8サイドバー削除、ホームページ風に

目次1 前提条件2 ファイルのダウンロード3 ファイルの編集3.1 テンプレートを認識させる3.2 サイドバーの削除4 ファイルのアップロード5 固定ページの設定5.0.1 ページ属性が出てこない場合 …