WordPressで作成したサイトを開けると、ロゴがふわっと表示されるような動きを付けたい

WordPressテーマの『SWELL』で作成したサイトを開けると、ロゴがふわっと表示されるような動きを付けたいのですが、方法が分からずうまくいきません。

jQueryを使っての表示と思いGooleで調べ、こちらの記事[ https://mckee-pro.com/%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e9%96%8b%e3%81%84%e3%81%9f%e6%99%82%e3%81%ab%e3%83%ad%e3%82%b4%e3%81%8c%e3%81%b5%e3%82%8f%e3%81%a3%e3%81%a8%e3%83%95%e3%82%a7%e3%83%bc%e3%83%89%e3%82%a4%e3%83%b3h]を参考に下記の通り入力いたしました。

jQeryのコードをスタイルシートのfunction.phpに入力した際に下記のエラーが表示され、ファイルの更新が出来ません。
jQueryについての知識が乏しく、コピーペーストで貼り付けたコードが間違っているのか、貼り付けるところが間違っているのか分からない状態です。

エラーの解決方法、また他にWordPressでのjQueryの実装の方法などご存じでしたらご教示願います。

よろしくお願いいたします。

入力したコード

HTML

【カスタマイズ→高度な設定】


<div class="logo_fadein">
<p><img src="http://creaist-mg.com/wp-content/uploads/2021/02/logo@2x.png" alt=""></p>
</div>

CSS

【外観→テーマエディター→スタイルシート】

logo_fadein{
1background: #FFF;
2position: fixed;
3top: 0;
4left: 0;
5height: 100%;
6width: 100%;
7z-index: 999;
8}
9.logo_fadein p {
10position: fixed;
11left: 50%;
12top: 50%;
13transform: translate(-50%, -50%);
14display: none;
15z-index: 9999;
16width: 280px;
17}
18```.
19### jQuery
20
21【外観→テーマエディター→スタイルシート→SWELL CHILD:テーマのための関数(functions.php)】

jQuery(function() {
setTimeout(function(){
$('.logo_fadein p').fadeIn(1000);
},500);
setTimeout(function(){
$('.logo_fadein').fadeOut(1000);
},2500);
});

※WordPressは先頭のコードを「jQuery(function() 」と記載するとのことだったのでその通り書いていますが間違っていればご指摘ください。


ファイルの更新をクリック

↓
下記エラーコードが表示されます。

### エラーコード

『wp-content/themes/swell_child/functions.php ファイルの32行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。』

syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or'$'

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryについての知識が乏しく

という話しではない。

PHPのファイルにJavaScriptのコードをそのまま書いたらエラーになるのは当然。
普通は<script></script>の間に書くか別のファイルとして読み込むかのどちらか。

とりあえずこんな形でfunctions.phpに追記。

add_action( 'wp_head', function() {
?>
	<script>
	jQuery(function() {
		setTimeout(function(){
			$('.logo_fadein p').fadeIn(1000);
		},500);
		setTimeout(function(){
			$('.logo_fadein').fadeOut(1000);
		},2500);
	});
	</script>
<?php
} );

あと、管理画面からPHPファイルの編集はやめたほうが良い。
ちゃんと調べてFTP等を使うように。

FTPについて
https://www.xserver.ne.jp/manual/#link-g

投稿2021/02/21 03:33