アップデート情報
2020-11-01

【アップデート情報】Vanilla City：スマホ用メニューのリニューアルを行いました

重要度★★★

ご利用ありがとうございます！

「Vanilla City」テーマのスマホ用メニューを、
より動作がスムーズな新しいものに置き換えるリニューアル修正を行いました。
３箇所の削除と２つのコピペだけで簡単に置き換わりますので、修正をお願いします。

＊以下、記載されている行数（例：48行目〜）は、デフォルト時のものです。
独自でカスタマイズされていれば数行ずれますので、行数はあくまで目安に、
「該当コード部分をしっかり確認して」、念のためバックアップを取った上で、
作業を行なってください。よろしくお願いします。

1. header.phpから削除（３カ所を削除してください）

◎ダッシュボード＞外観＞テーマエディター＞テーマヘッダー（header.php）

●47行目〜

<div class="toggle">
<a href="#"><img src="<?php echo esc_url( get_template_directory_uri() );?>/images/toggle-on.gif" alt="toggle" class="menu-toggle" /></a>
</div>

 

●19行目〜

<script type="text/javascript">
$(document).ready(function(){
   $(document).ready(
      function(){
      $(".single a img").hover(function(){
      $(this).fadeTo(200, 0.8);
      },function(){
      $(this).fadeTo(300, 1.0);
      });
   });
   $(".menu-toggle").toggle(
      function(){
      $(this).attr('src', '<?php echo esc_url( get_template_directory_uri() );?>/images/toggle-off.png');
      $("#nav").slideToggle();
      return false;
      },
      function(){
      $(this).attr('src', '<?php echo esc_url( get_template_directory_uri() );?>/images/toggle-on.gif');
      $("#nav").slideToggle();
      return false;
      }
   );
});
</script>

 

●8行目〜

<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() );?>/jquery/html5.js" type="text/javascript"></script>
<![endif]-->

 

2. footer.phpに追加（47行目の＜!–?php wp_footer(); ?–＞のすぐ下辺りに追加すると分かりやすいと思います）

◎ダッシュボード＞外観＞テーマエディター＞テーマフッター（footer.php）

<!-- スマホ用ハンバーガーメニュー -->
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery(".hamburger").click(function () {
  jQuery("#nav").slideToggle();
 });
});
</script>

<div class="toggle">
<div class="hamburger hamburger--spin">
<div class="hamburger-box"><div class="hamburger-inner"></div></div>
</div>
</div>
<!-- / スマホ用ハンバーガーメニュー -->

<!-- ハンバーガーメニュー-->
<script>
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
 
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
  forEach(hamburgers, function(hamburger) {
    hamburger.addEventListener("click", function() {
      this.classList.toggle("is-active");
    }, false);
  });
}
</script>
<!-- / ハンバーガーメニュー-->

 

3. スタイルシートに追加（180行目「トップナビゲーション欄」の最後に追加すると分かりやすいと思います）

◎ダッシュボード＞外観＞テーマエディター＞スタイルシート（style.css）

/* ハンバーガーメニュー
---------------------------------------------------- */

.hamburger { display: none; }

/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 10px 2px;
display: inline-block;
cursor: pointer;
transition-property: opacity, -webkit-filter;
transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }

.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }

.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 35px;
height: 3px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }

/*
* Spin
*/
.hamburger--spin .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

 

★

以上です。

＊本日2020年11月1日14:30以降のダウンロードファイルは変更済みです。

＊作業を行なう際は、万が一間違えてもすぐに元に戻れるように、
必ず必ず必ずバックアップを取ってから慎重に行ってください！

＊ご利用のWordPressのセキュリティ環境によっては、
WordPress管理画面から直接PHPファイルの修正・保存ができない場合があります。
その場合は、レンタルサーバーの「ファイルマネージャー（FTP）」機能をご利用ください。
サーバー上のファイル（/wp-contents/themes/テーマフォルダ/xxxx.php）が、
サーバー管理画面から直接編集できます（ご利用方法はサーバーのQ&Aをご確認ください）。

おすすめWordPressテーマ10選
by