ありがとうございます。
＞WordPress からエラーログのメールが届いていたり…。
エラーメールに以下のエラーが載っていました。
この問題を解決するためにヘルプを求めた場合、以下の情報を尋ねられるかもしれません。
WordPress バーション6.4.3
現在のテーマ: Snow Monkey (バージョン 25.3.3)
現在のプラグイン: (バージョン )
PHP バージョン8.1.7
エラー詳細
===============
エラータイプ E_ERROR が /xxxxx/2021wp/wp-content/themes/snow-monkey/snow-monkey/vendor/autoload.php ファイルの 23 行目で発生しました。 エラーメッセージ: Uncaught Error: Failed opening required ‘/xxxxx/2021wp/wp-content/themes/snow-monkey/snow-monkey/vendor/composer/autoload_real.php’ (include_path=’.:/usr/local/php81/lib/php’) in /xxxxx/2021wp/wp-content/themes/snow-monkey/snow-monkey/vendor/autoload.php:23
Stack trace:
#0 /xxxxx/2021wp/wp-content/themes/snow-monkey/snow-monkey/functions.php(14): require_once()
#1 /xxxxx/2021wp/wp-settings.php(611): include(‘/home/users/web…’)
#2 /xxxxx/2021wp/wp-config.php(93): require_once(‘/home/users/web…’)
#3 /xxxxx/2021wp/wp-load.php(50): require_once(‘/home/users/web…’)
#4 /xxxxx/2021wp/wp-admin/admin-ajax.php(22): require_once(‘/home/users/web…’)
#5 {main}
thrown
＞お使いの PHP のバージョンが 8.1.7 とのことですが、8.0 に切り替えて、最新版の WordPress にアップデートしてみることは可能でしょうか？
コンパネでは、8.1以外だと5.6、7.2、7.4が選択できますが、8.0は選べないようです。
ワードプレスは現在6.4.3なので最新版になっており、ダッシュボードでは「最新バージョンの WordPress をお使いです。」と表示されております。
とりあえず7.4にして、「最新バージョンの WordPress をお使いです。」と表示された状態は確認しました。
●Snow Monkeyの最新版をDL＆解凍して、FTPから手動アップロード
→500 Internal Server Errorで管理画面もサイトも表示されなくなるので、元（15.6.0）に戻す
このときに、サーバーのエラーログにどのようなメッセージがでているか確認することは可能でしょうか？ 使用しているレンタルサーバーのエラーログを見てみたり、WordPress からエラーログのメールが届いていたり…。
お使いの PHP のバージョンが 8.1.7 とのことですが、8.0 に切り替えて、最新版の WordPress にアップデートしてみることは可能でしょうか？
ご連絡ありがとうございます。
なるほど、そうなのですね・・・勉強になります。
今後は以下の点を考慮した上で作業にはいろうかと思います。
———————
【前提】
①ページ内リンクあるのか。
②カスタムフィールド利用するのか。
(Advanced Custom Fields等でも同じ症状がでるのか検証できてないですが)
【上記に該当する場合の選択肢】
③u-smooth-scroll使う場合には、管理画面より画像に高さ設定して、先日頂いたコードで調整。
④u-smooth-scrollを使わない。
(u-smooth-scrollをクラスに指定しなければ、ちゃんと着地する。)
③別のJS等でスクロールの挙動を調整。
(工数かかるので要見積、実際にうまく調整できるかも未知数)
———————
お手数をお掛けしてしまって申し訳なかったですが。
やりとりの過程て色々と理解できてない部分も浮き彫りになり、大変勉強になりました。
_wp_attachment_metadata、_wp_attached_file は WordPress が自動的に保存するデータみたいです。なのでこれはこれで消すと何か別の不具合が発生する可能性はあるかもしれません…。
その通りです。理想はカスタム投稿タイプとかつくって、それを投稿的に更新すると、入れ替わるというのをイメージしていました。
なるほどです。Snow Monkey Blocks では実現できないので、もしそういう運用でやる必要があるのであれば独自に実装するか、実現できそうなプラグインを探すかになります。
配置時に、高さ100%と配置可能が選択できるのですが、違いはなんでしょうか
コンテンツスライダーの子要素であるスライドブロックに背景色をつけるとわかりやすいですが、「高さ100%」だと全てのスライドが一番高さが高いスライドと同じ高さになります。「配置可能」の場合はそのスライドの高さが中身にフィットするように縮みます。そのうえで、左上に配置するのか、右下に配置するのか、配置場所をブロックツールバーから選ぶことができます。
ブロックの設定で、フェード、スライダーをずらすの意味はなんでしょう、選択すると並びません
「フェード」は、スライドの切り替えがスライド動作ではなくフェードイン・アウトになります。
「スライダーをずらす」は下記のページ内にサンプルがあるので見てもらうのがわかりやすいと思います。
画面が広いほうがわかりやすいですが、通常、全幅にするとスライドが画面の一番左端から並びますが、「スライダーをずらす」を有効化するとコンテンツエリアの左端から並ぶようになります（ただ、スライド可能な範囲自体は全幅です）。
あと、ブロックで画像を並べてる時は、管理画面上では１画面目しかでてこないで、更新すると並んでるというのは仕様ですか？
繰り返しになりますが、「並ぶ」「並ばない」というのはどういう意味でしょうか？ スライドが横に並ぶ、という意味であれば、エディター上でもフロントでも設定した枚数で横並びになっていると思います（なっていないならバグなので調査が必要になります）。
エディター上ではスライドしない、フェードイン・アウトしない、という意味であれば仕様です。
画像サイズも大きめで取り込んでおけば、１枚目に合わせてリサイズされるというカタチでしょうか（または最少サイズにあわせて）
特にそのような仕組みはないので、画像ブロックの設定や CSS で調整することになります。
説明が下手くそですみません。
「コードを書き換えるのは手間だから UI で更新できるようにしたい」
その通りです。理想はカスタム投稿タイプとかつくって、それを投稿的に更新すると、入れ替わるというのをイメージしていました。
現状は、コンテンツを入れ替える＝ブロックの画像を差し替えてリンクを変更するですよね。
手順書作れば顧客側でもできそうなきがするので、ここは要件との調整をしてみます。
「並ばない」というのはどういう意味でしょうか？
並びました！
細かいところで質問があります。配置時に、高さ100%と配置可能が選択できるのですが、違いはなんでしょうか
ブロックの設定で、フェード、スライダーをずらすの意味はなんでしょう、選択すると並びません
あと、ブロックで画像を並べてる時は、管理画面上では１画面目しかでてこないで、更新すると並んでるというのは仕様ですか？ 画像サイズも大きめで取り込んでおけば、１枚目に合わせてリサイズされるというカタチでしょうか（または最少サイズにあわせて）
この辺がまだ理解できていません。よろしくお願いいたします
Snow Monkey の機能としては無いので、やるとすれば
– CSS の background-image でやる
– フックを使って画像を挿入する
のどちらかで対応することになると思います。簡単なのは CSS での対応ですかね。
デザインがわからないのでセレクタや指定は具体的には書けませんが、background-image、background-size、background-position、background-repeat: no-repeat の組み合わせで指定すれば良いと思います。
Snow Monkey の PC サイズのメディアクエリは min-width: 1024px なので、
@media (min-width: 1024px) {
.l-header { // ← デザインによってはもっと良いセレクタがあるかも
background-image: xxx;
background-size: xxx;
background-position: xxx;
background-repeat: no-repeat;
}
}
のような感じになると思います。
コードだと、なんらかのオブジェクトとして管理画面から運用者が更新できない
アニメーション表現がされてない
すみません、ちょっとどういう意味かわかりかねるのですが「コードを書き換えるのは手間だから UI で更新できるようにしたい」ということですかね？ コードを提示したのは貼り付けたらすぐに試せるからで、コンテンツスライダー自体はブロックなので、ブロックのインサーターから普通に挿入して設定できます。
コードと、コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらは別のはなしじゃないですよね コンテンツスライダーに画像いれてみましたけど、並びません。
「並ばない」というのはどういう意味でしょうか？ 2列・3列にできない、という意味であれば、コンテンツスライダーの設定パネルにある「表示するスライド数」から設定できます。
ありがとうございます。カスタムHTMLに貼ってみました
コードだと、なんらかのオブジェクトとして管理画面から運用者が更新できない
アニメーション表現がされてない
というかんじです
コードと、コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらは別のはなしじゃないですよね コンテンツスライダーに画像いれてみましたけど、並びません。できればスライダーのレイアウト（画像サイズ）等はいじることなく、固定値にしておいて管理画面からだけ更新できるようにしたいです（リンクをどうするかも考える必要がありますね）
結構ありがちな構成だと思うのですが、工夫可能でしょうか？
>>width も height も両方 auto の場合
こちら勘違いすみませんでした。
やっと原因が特定できました(なぜかは詳しく分からないですが)、スノウモンキーが原因ではなく、カスタムフィールドスイーツが何らかしらの影響を与えていることがわかりました。
【わかったこと】
①マルチサイト化のせいじゃない。(シングルサイトでも発生)
②CSS、オーバーライドのせいじゃない。(マイスノウモンキー、CSS全削除)
【症状改善】
・データベースwp_postmeta内のカスタムフィールドに関係する情報を削除。(一部抜粋)
こういったwidthやheight部分の記述が干渉しているのかと思います。
(238, 99, '_wp_attachment_metadata', 'a:6:{s:5:\"width\";i:378;s:6:\"height\";i:117;s:4:\"file\";s:20:\"2024/03/title001.png\";s:8:\"filesize\";i:519;s:5:\"sizes\";a:2:{s:6:\"medium\";a:5:{s:4:\"file\";s:19:\"title001-300x93.png\";s:5:\"width\";i:300;s:6:\"height\";i:93;s:9:\"mime-type\";s:9:\"image/png\";s:8:\"filesize\";i:98;}s:9:\"thumbnail\";a:5:{s:4:\"file\";s:20:\"title001-150x117.png\";s:5:\"width\";i:150;s:6:\"height\";i:117;s:9:\"mime-type\";s:9:\"image/png\";s:8:\"filesize\";i:97;}}s:10:\"image_meta\";a:12:{s:8:\"aperture\";s:1:\"0\";s:6:\"credit\";s:0:\"\";s:6:\"camera\";s:0:\"\";s:7:\"caption\";s:0:\"\";s:17:\"created_timestamp\";s:1:\"0\";s:9:\"copyright\";s:0:\"\";s:12:\"focal_length\";s:1:\"0\";s:3:\"iso\";s:1:\"0\";s:13:\"shutter_speed\";s:1:\"0\";s:5:\"title\";s:0:\"\";s:11:\"orientation\";s:1:\"0\";s:8:\"keywords\";a:0:{}}}'),
(239, 100, '_wp_attached_file', '2024/03/item001.png'),
【テスト環境】
https://tatsumi-insatsu.sakura.ne.jp/developer/kakinuma2/
※こちらは、DB復元して不具合(アンカーズレ)が発生している状態。(metaを削除すればズレない
PC とスマホ、どちらでもど真ん中に画像が入るのが理想ですかね？
ヘッダーの中央に画像を２つ載せたい。
「ヘッダー」で記載いただいた HTML には img が1つでしたが、「２つ載せたい」ということは、本当は載せたい img は2つある、ということですかね？
コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらどうですかね？
こっちで簡単なサンプルをつくってみました。下記をコピーしてエディターに貼り付けてみてください。
<!-- wp:snow-monkey-blocks/spider-contents-slider {"dots":true,"gutter":"s","lgSlidesToShow":3,"canvasPadding":{"top":0,"bottom":0,"right":0,"left":0},"sliderClientIds":"[\u0022a2ecfd33-7816-4132-89fc-98150866709a\u0022,\u0022e94cc24d-6ff7-4192-b402-c8249317eaac\u0022,\u0022b8ea18d1-835a-4409-88ec-34345728b00c\u0022,\u0022c29dcffc-a811-4f59-b4ed-6e913cff0a47\u0022,\u002203ede109-55dc-477e-84d8-bb97e1ac5447\u0022,\u00226e1cc54c-e96d-4f08-9891-bff1a1770d66\u0022]"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider smb-spider-slider smb-spider-contents-slider smb-spider-slider--gutter-s" data-fade="false" data-shuffle="false" data-lg-slide-to-show="3"><div class="spider"><div class="spider__canvas"><!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="0" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->
<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="1" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->
<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="2" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->
<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="3" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->
<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="4" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->
<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="5" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item --></div></div><div class="spider__dots"><button class="spider__dot" data-id="0">0</button><button class="spider__dot" data-id="1">1</button><button class="spider__dot" data-id="2">2</button><button class="spider__dot" data-id="3">3</button><button class="spider__dot" data-id="4">4</button><button class="spider__dot" data-id="5">5</button></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider -->
こちらを参考に
または
のどちらかを投稿ページ用の固定ページに割り当てるだけでいいと思います。
1ページ辺りの表示件数は、管理画面の「設定」>「表示設定」の「1ページに表示する最大投稿数」で調整できます。
「カテゴリーを横断した全記事の一覧」というのは、通常の記事一覧ページ（home.php が適用されるページ）で良いのでは？と思ったのですが、どうですかね？
それともカスタム投稿タイプも含んだ全記事ということでしょうか？
やってみたのですが、結論から言うと、実現方法がわかりませんでした。何とか無理くりやればできないことはないのかもしれませんが、ちょっと僕の技術力ではメンテナブルな良い方法が思い浮かばず…。
一応頂いたコードでご指摘できる部分については書いておきます。
・snow monkey formsのコード
checkboxes-xxxxx の選択肢を追加しているコードに見えますが、特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。
・JavaScript
Snow Monkey Forms は入力・確認・完了・エラーの画面遷移を JavaScript で動的に行っているので、$('[name="checkboxes-xxxxx[]"]').change(function() のような要素の指定だと、画面遷移したら DOM からイベントが取れてしまいます（JavaScript で動的に再取得された要素は、同じ名前でも別の要素と判定される）。
なので、動的な要素にも対応させるには $(document).on('change', '[name="checkboxes-1hojjnt8j[]"]', function() { のような書き方に変える必要があります。
—
入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。
