【アップデート情報】Pantomime：スマホ用メニューのリニューアルを行いました＆PC時タイトルマウスオーバー表示の廃止
重要度★★★
ご利用ありがとうございます！
「Pantomime」テーマのスマホ用メニューを、
より動作がスムーズな新しいものに置き換えるリニューアル修正を行いました。
３箇所の削除と２つのコピペだけで簡単に置き換わりますので、修正をお願いします。
＊以下、記載されている行数（例：48行目〜）は、デフォルト時のものです。
独自でカスタマイズされていれば数行ずれますので、行数はあくまで目安に、
「該当コード部分をしっかり確認して」、念のためバックアップを取った上で、
作業を行なってください。よろしくお願いします。
1. header.phpから削除（３カ所を削除してください）
◎ダッシュボード＞外観＞テーマエディター＞テーマヘッダー（header.php）
●51行目〜
<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>
●20行目〜
<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);
});
});
$(".slidebase").hover(function(){
$(this).find(".slidetext").slideToggle("normal");
});
$(".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>
【補足解説】 PC用表示時にトップページやアーカイブのサムネイルをマウスオーバーでタイトルが表示される仕様を廃止しました。
シンプルに写真だけを載せるタイプに変更しましたが、
ブログ的に使いたい場合などで、タイトルが表示されないと困る、という場合は、
上記の削除したコードの代わりに、下記コードをヘッダー（＜/head＞直前）に記述してください。
<script type="text/javascript">
$(document).ready(function(){
$(".slidebase").hover(function(){
$(this).find(".slidetext").slideToggle("normal");
});
});
</script>
これで以前の通りのPC時でもマウスオーバーでタイトル表示されます。
●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をご確認ください）。
Minimaga
ブログ初心者でもシンプルでおしゃれなWEBマガジンがめちゃくちゃ簡単に運営できる、オウンドメディア・個人/企業ブログ用WordPressテーマ。人気ブログのテーマがテンプレート化！ ＞
Minimal Cafe
カフェ・レストラン・飲食店のミニマルサイトが超簡単に作れる、シングルページ／LPタイプWordPressテーマ。SNS＋公式シンプルサイトの併用運営なら管理がラクチンで集客力・信用も大幅アップ！＞
Folclore
Flora deux
White Studio
ビジネスサイト、企業サイト、コーポレートサイトがあっという間にできあがるWordPressテンプレート。TOPページはウィジェットだけで超簡単にカスタマイズできます。スピードと結果で勝負！ ＞
Slauson
シンプルでミニマルなマガジンタイプの公式サイト型ワードプレステンプレート。企業サイト・ショップサイト・オウンドメディアに最適！マガジン型公式サイトなら集客＆ブランディングも効果絶大！ ＞
My Song
ランディングページ（ペラサイト・シングルページ）専用のWPテンプレート（レスポンシブ）。名刺替わりのペラサイト、とりあえずのコーポレートサイト、SNS・広告の飛び先サイト、特設サイトにも便利！ ＞
Minimal Journal
徹底的に無駄な装飾や機能を排除したミニマリスト向け・ミニマルデザインブログ用ワードプレステーマ（スマホ対応レスポンシブテーマ）。あなたの写真・イラスト・文章をスタイリッシュに発信できます！ ＞
Black Studio
ビジネスサイト、企業サイト、コーポレートサイトが一瞬で簡単にできあがるWordPressテンプレート。徹底的に無駄を省いたWEB初心者に優しいミニマル設計で、導入・管理・運営もラクラクです！ ＞
Vanilla City
シンプルでおしゃれなブログ専用レスポンシブWordPressテンプレート。広告やCTAもウィジェットで簡単ラクラク設置、企業のオウンドメディア・アフィリエイトブログにも最適＆効果抜群です！ ＞
