子テーマのjavascript.jsに書かれたコードがエラーを出しており、それにより今回書いたコードも動いていないような気がします。

cocoon-child-master/javascript.jsに書いている内容(「//スクロールしないリスト」から最後まで)を削除すると解消されるでしょうか。

はる様

早速見て頂きありがとうございます！

ocoon-child-master/javascript.jsの該当部分を削除し、下記の記載だけにしましたがダメなようです…

//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。

投稿者:: @hal22

テーマ名：Cocoon
バージョン：1.6.1.1

Cocoonのバージョンが古いせいかもしれません。ダッシュボードから最新版へ更新してください。ダッシュボードから更新できる一番新しいバージョンは2.2.8.1です。

PHPバージョン：5.6.31

PHPのバージョンも古いため、こちらもレンタルサーバーの推奨のバージョンへアップデートしたほうがいいと思います。7.4辺りが推奨バージョンかと思います。

おそらく、親テーマは低サイズ版をインストールなさったのですね。

テーマのダウンロード
https://wp-cocoon.com/downloads/#toc2

原因は多分分かりました。

a[href^="#"]

この部分が「hrefが#から始まる時」という指定になっているので、URLから始まって後ろに#が付いているだけのメニュー部分が対象になっていないのだと思います。

a[href*="#"]

にすれば(hrefに#が含まれる時)できるかなと思ったのですが、私の環境で試した限りではダメでした…。

皆様ありがとうございます！まとめて返信させて下さい。

＞はる様

何度もありがとうございます。

私も一応おっしゃられた通りに変更してみましたがダメでした。

＞さるこ様。mk2様。

そうなんです。phpもテーマのバージョンも古いのです。

プラグインの関係で5.6でしたが、先ほど思い切ってphp7.4にしました。

cocoonですがインストール時エラーが出たので軽量版なのですが、軽量版インストールの説明で「子テーマを有効化後しばらくして、自動更新から最新版にアップデートしてください。」とあったので親テーマを自動更新にしているのですが、一向に更新されずバージョン1.6.1.1のままで、手動の「今すぐ更新」を押していいのか怖くて押せません。

これは更新してしまって良いのでしょうか。

申し訳ございません。

php7.4でサイト内の別wordpressに下記エラーが出ましたので、とりあえず5.6に戻すしかなくなりました。

そのwpは私が管理していないので訂正も出来ず…

/wp/wp-content/plugins/ps-disable-auto-formatting/ps_disable_auto_formatting.php on line 312

皆様せっかく教えて頂いたのに本当にすみません。

HAL22さん

ご自身の管理ではないものがあるとのことで、対応は難しいのかも知れませんね。

「PS Disable Auto Formatting」というプラグインでエラーが出ているようですが。
このプラグインは、最終更新が6年前ですし、WordPressは少なくとも5.x系ではテスト検証されていないように思います。

おそらくクラシックエディターでの自動整形を嫌ったものかと思われますが、同様の機能は別のプラグインにもあるような気がします。

ただ、PHP5.6系で運用なさっているということは、他にも古いものがあるのかも知れませんね。

mk2様

他プラグインの情報まで教えて頂きありがとうございます。

そちらのwpの管理者に聞いてみたいと思います。

@hal22

「自動更新」はダッシュボードから更新することを指していると思います。軽量版だとだいぶバージョンが古いのでアップデートしたほうがいいです。

PHPのバージョンに関してはWordPressを管理してる方が他にいらっしゃる？ようなので、その方とアップデートできないか相談してみてください。

参考にされた記事のコードを私の環境でjavascript.jsに記述したところ、スムーズスクロールができるようになりました。footer-insert.phpではなぜか動きませんでした…。なぜ？

javascript.jsに貼り付けるときは最初の

<script>

と、最後の

</script>

を削除してください。たぶん削除しないとエラーが出ると思います。

さる子様

教えて頂きありがとうございます。

勘違いしていました。自動更新＝手動でOKなのですね。

ですが現状のphp5.6のままでテーマを更新して良いのか不安です。

インストール説明ページの「PHP5.4とか古いPHPバージョンで利用すると、新しい関数を利用できずエラーが出る可能性があるので必ずサーバーのPHPバージョンをご確認ください。」という一文にビビっています。

javascript.jsの検証にも感謝致します！

//スムーズスクロール
jQuery(function(){
jQuery('a[href*="#"]').click(function() {// # クリック時の処理
var speed = 850; //スクロール速度を設定（単位：ミリ秒　※自由に変更可能）
var href= jQuery(this).attr("href"); // アンカーの値を取得
// 移動先を取得
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;// 移動先を数値にて取得
// スムーズスクロール
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});

footer-insert.phpの記載を消し、上記をjavascript.jsに記載してみたのですが、私の古い環境ではダメなようです。

なぜ「TOPへ戻る」ボタンはスムーズに動くのでしょうか…。

HAL22さん

ご提示いただいた、スムーズスクロールですが。

親テーマのjavascript.jsに、ほぼほぼ同じコードが書いてありますね。
違うところは、スクロール速度の値くらいです。

そして、決定的な違いは、親テーマのコードは、コメント化されているということです。

このコメント化を外すと、ちゃんとスムーズスクロールしますね、私の環境では。

コメント化されているのには、何か理由があるのかも知れません。

再編集できませんでした。

「なぜ『TOPへ戻る』ボタンは」という書きこみで気づきました。
親テーマのjavascript.jsにコードが書いてあるからです。

mk2様

ありがとうございます。

親テーマのjavascript.jsの

/////////////////////////////////
// JavaScriptコード
/////////////////////////////////

や

/////////////////////////////////
//TOPへ戻るボタン
/////////////////////////////////

などコメント部分を削除してみたのですが、やはり私の環境ではダメでした。

関係ないと思いますが、明日PCを変えてやってみます。

皆様にご協力頂いているのに出来なくて申し訳ないです。

HAL22さん

スミマセン、もう少し説明を書くべきでしたね。

親テーマのjavascript.jsの182行目から以下のコードが書かれていると思います。
（ほとんど最後の方です。）

/*
  $(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 800; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
*/

この部分の先頭行の「/*」を削除。（もしくは、「///*」にする）
この部分の最終行の「*/」を削除。（もしくは、「//*/」にする）

です。

このコード全体がコメント化（無効化）されていますので、それを解除（有効に）するイメージです。

上記2箇所のみ（「/*」と「*/」）の修正にしてください。
他の場所は触らない方が良いと思います。

ただ、親テーマですから。
アップデートがある度に対応が必要に。

これと同じコードを子テーマのjavascript.jsに書けばよいのでしょうか。
（参考にしたサイトとほぼほぼ同じですが。）

そもそも、なぜ親テーマではコメント化されているのか。
その辺りの背景が分からないですけれど。

HAL22さん

申し訳ないのです、前言撤回です。

少し心配になり、スマホからではありますが、サーバーのテスト環境で確認してみました。

先程の対応でスムーズスクロール自体は有効になりますが、グローバルナビからはスムーズにはならなかったです。

何通りか試したのですが、対応策は見つかっておりません。

申し訳ないです。

（検索すると、解決策はありそうなのですが、スマホからということで、試してはいないです。修正量が多そうで。）

すみません、追記します。

グローバルナビからの場合は、一旦ページのトップに戻してから、トップから該当箇所へスクロールという処理が必要そうです。

ページロード時間の考慮も必要かも知れません。

何度もすみません。

まだ不確かですが、上記のような対応でいけそうな感じはします。

ただ、そこまでの対応が必要だとすると、動作確認などある程度の検証が必要だと思いました。

私のような素人が迂闊に答えてはいけないのではないかと思います。

気にはなりますので、夜が明けてから試そうとは思いますが、それまでに留めておくべきなんじゃないかと思います。

試した結果だけはご報告させていただきます。

具体的な対応は、詳しい方のご回答をお待ちいただくか、もしくはプロにお願いすべきなのかも知れません。

mk2様
ありがとうございます！
深夜まで検証して頂き感謝に堪えません。

親テーマのjavascript.jsの182行目～という件であれ？と思い見てみたら、軽量版は92行までしかありませんでした。
とりあえず最新バージョンの親テーマをダウンロードし、javascript.jsだけを「/*」「*/」部分を削除してUPしました。
テーマは軽量版のままです。
PCでもスマホ(アンドロイド)でもグローバルメニューからは動作しないようです。

軽量版から最新版に更新しないと、せっかく皆さんにご協力頂いているのに同じ環境にならないから何が正しいのかわかりませんよね…
まずphp7にを上げる努力をしないといけないなと思いました。

こんな状況ですが打開策がありましたら是非お願い致します。

HAL22さん

まだスマホで確認できておりませんが。

スムーズスクロール自体が有効になったかは、目次をクリックしてみれば、分かると思います。

しかし、その状態でも、グローバルナビからは、スムーズではないと思います。

他の処理が必要なのではないかと思います。

（まだ確認できていませんが。）

何度もすみません。

もう一つのワードプレスの関係でやはり現状php5.6で運営するしかなさそうです。

その場合、cocoonのテーマはこのままの状態でいくしかなさそうです。

基本的なことがわからず申し訳ございませんが質問させてください。

タイトルの質問と異って恐縮ですが、テーマの自動更新さえしなければ現状のバージョンで運営しても突然更新出来なくなったりはしないでしょうか？

ある日突然php5.6は使えません、ということは起こるのでしょうか？

HAL22さん

テーマも、プラグインも、WordPressも、全てをバージョンアップしないという前提なら、PHP5.6のままでも使えると思います。

WordPress自体は、PHP8対応へ進んでいますし、PHP5.6もそのうちサポートされなくなると推測します。

2019年と古いものですが、WordPressはPHP7を必須にしようとする動きはあるように思います。
https://ja.wordpress.org/2019/04/03/minimum-php-version-update/

PHP8完全対応の際に、もしかすると…という気はします。

今でも、PHP5.6系はWordPressにワーニングみたいなものが出てしまう気はしますが。
（おそらく、7.1とか7.2でも出るのでは。）

PHP5.6でも動くけど、というくらいの位置付けみたいですね、今でも。
（既にPHP5.6自体がサポート終了している。）
https://ja.wordpress.org/about/requirements/

mk2様

色々調べて頂き感謝致します。

私もずっと調べていますがいまいち分かっておらず…。

PHPのセキュリティリスクということで、php5.6のセキュリティサポートが切れているのでバージョンアップをしないといけない。
とりあえず将来的にphpバージョンアップする、ということで現状、本当に仕方なくphp5.6でも何とか大丈夫ということでしょうか？

おっしゃる通りダッシュボードに警告出てます…。せっかく教えて頂いてもphp7.4に出来なくて泣きそうです。

HAL22さん

変な例えかも知れませんが、PC端末で言えば、今でもWindowsXPを使っているようなものと考えれば良いかも知れません。

動きはするけど、セキュリティ的には何があるか分からないよ、という状態かと思います。
（既に、PHP7.2以前はサポートが終了しています。）

すみません、reCAPTCHAのクリックを漏らし、未ログイン状態で返信してしまいました。

ああ、分かります！本当に分かりやすい例えです。

とりあえずこのままスムーススクロールも出来ませんがサイトを作ってしまいたいと思います。

スムーススクロール機能も引き続き調べながらやっていきますので、もう暫くこのトピックスを閉じないで置いておきたいと思います。

管理者様や他のご協力者様が不都合だとお思いなら閉じて下さい。

どうぞ宜しくお願い致します。

HAL22さん

スムーススクロールは、あのままではダメで、一工夫必要なんだと思います。

私がやってみたところ、グローバルナビから該当ページのアンカーに飛んで、その後ページトップへスムーススクロールしてしまうという、間抜けなものができてしまいました。

それとは別に、一旦ページトップへ戻すということはできたのですが、そうすると画面がチラついてしまいます。
その後、アンカーまでスムーススクロールできたとしても（今のところできていません）、そもそもチラついては意味がない気もします。

ちょっと私には手に負えない感じです。
お詳しい方、もしくはプロの方の出番かなという気は致します。

mk2様

何から何までありがとうございます。

私レベルではそこまでも行きませんので検証して頂けて嬉しいです。

もう少し頑張ってみます！

親テーマにスムーズスクロールの記述があったのは、過去に要望があって実装しようとしたからみたいです。

そのときはLazy Loadとの兼ね合いで実装を見送ったようです。

https://wp-cocoon.com/community/postid/19412/

さる子さん

ありがとうございます。

なるほどです。

グローバルナビのことは置いておいて、日中スムーズスクロールだけのテストを運用サイトでしていて疑問があったんです。

写真が100枚以上あるようなページだと、スクロール位置がズレる時がありました。

そういうことかと、少しスッキリした気がします。
（でも、できないことにはモヤモヤしていますけれど。）

さる子様 mk2様

引き続きのご検証ありがとうございます！

この2年前のトピは質問の前に拝見し、今回の私がした作業と違うようだったので気にしておりませんでしたが大きく関わっていたのですね。

…とにかく無理っぽいというのは理解しました。

HAL22さん

グローバルナビのことは置いておいてですが。

スムーズスクロールのLazyload対応は、ネット上では見かけます。
（Qiitaに載っていました。）

ただ、今日はちょっと私に試す余裕はないかもしれません。

処理的には、途中までスクロールさせて、遅延で展開されていなかった画像の展開を待ち、その後またスクロールという感じみたいです。

はたしてそれでスムーズになるのかという気はしますので、試してはみたいところです。

HAL22さん

Qiitaに載っていた方法でも、上手くいきませんでした。
いったい何が、ということも良く分からないです、無念です。

mk2様

本当に本当にありがとうございました。

皆様のお手を煩わせ申し訳ないのと感謝の気持ちで一杯です。

現状では解決しそうになく、とても残念です。

未解決の場合はトピは置いておいていいのでしょうか？

HAL22さん

力及ばず、申し訳ないです。

個人的には、開けたままにしておくのは、ちょっと気持ち悪い気はします。

もしよろしければ、一旦このトピックは閉じていただいて。
「こういうものがみつかったのだけど、どうでしょう」と、また新たにトピックを立てていただくのが良い気します。

その際に、以前のトピックに関連していると、このトピックをリンクしていただけると、有難いです。

かしこまりました。

一旦閉めさせて頂きます。

mk2様、最後までありがとうございました！

ご協力いただいた皆様ありがとうございました。