[対馬 俊彦]

このトピックを見て、やってみようという方がいるかもしれないので、情報を追加しておきます。

Lightning G3 のサイトで、子テーマの functions.php に以下のコードを書いたら、スムーススクロール動作しました

このカスタマイズを行っておいた私のサイトでレイアウトがくずれていることに、今日気がつきました。

くずれているのは、position: fixed; height: 100%; とか position: fixed; top: 15vh; のような CSS を指定している部分です。

高さの取得が期待通りにならないようなかんじです。

ということで、SmoothScrollAnimations を使うときは要注意です。

プラグイン MouseWheel Smooth Scroll を使う方が安全だと思います。

[対馬 俊彦]

横から失礼します。

VK Blocks Pro をアップデートしたら、
私のサイトでもグリッドカラムブロックのレイアウトが変わりました。

/wp-content/plugins/vk-blocks-pro/build/block-build.css の
以下の部分の justify-content: center; が原因と思われます。

.vk_gridColumn .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

【症状の起きているページのURL】https://demo1.uonuma-js.com/grid-column-layout/

[対馬 俊彦]

たぶん、ベクトルさんが対応してくれると思いますが、お急ぎであれば…

ウィジェットで 最新の投稿 を囲んでいるグループブロックのスタイルを
スティッチ から Dashed に変更すれば、とりあえずリンクが有効になると思います。

[対馬 俊彦]

石川さん、コメントありがとうございます。

たぶん アクションフックで

<div data-scroll>

タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね

Lightning G3 のサイトで、子テーマの functions.php に以下のコードを書いたら、スムーススクロール動作しました🙌

function my_wp_enqueue_scripts() {
  wp_enqueue_script( 
    'images-loaded', 
    get_stylesheet_directory_uri() . '/imagesloaded.pkgd.min.js',
    [],
    false,
    true
  );
  wp_enqueue_script( 
    'smooth-scroll', 
    get_stylesheet_directory_uri() . '/smoothscroll.js',
    [],
    false,
    true
  );
}
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts' );

add_action(
  'lightning_site_header_before',
  function() {
    ?>
   <main><div data-scroll>
    <?php
  }
);

add_action(
  'lightning_site_footer_after',
  function() {
    ?>
   </div></main>
    <?php
  }
);

さすが、カスタマイズしやすい Lightning ですね🥰

こんなところにまでフックがあったなんて、気がついていませんでした。

【補足1】
wp_enqueue_script の最後の引数を true にしないと、先頭で読み込まれてしまい、動作しませんでした。

【補足2】
こんな ↓ プラグインを見つけました。

MouseWheel Smooth Scroll

[対馬 俊彦]

たぶん アクションフックで

<div data-scroll>

タグと閉じタグを挿入すればできるのではないかなと思ったりしますがどうですかね

なるほど…

lightning_site_header_before / lightning_site_footer_after を使えばできるかもしれませんね。

明日、やってみます😊

[対馬 俊彦]

おもしろそうなスクリプトなので、昼休みに使ってみました。

HTML でページを記述するならすぐに実装できましたが、
WordPress サイトだと実装は難しいと感じました。

Lightning だと、カスタマイズして、出力する HTML を変更する
必要があるみたいで、私はできませんでした。

カスタマイズのスキルがすごく高い人ならできるかもしれません。

要望に合うプラグインを探すのが近道だと思います。

[対馬 俊彦]

横から失礼します。

「ページが見つかりません」を全幅で表示したいのですが、

CSS で調整するよりも、404 ページのカラム設定を 1カラム にする方が楽です。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

ご質問に関連するトピックです。

スライダー サムネイル 連動できますか？

一昨年のトピックですが、現時点でも状況は変わっていません。

さまざまなブロックを自由に組み合わせてスライド内に配置できるのが VK Blocks のスライダーの大きな特長なので、「スライダーの画像を下に一覧表示」という仕様とは相性が悪く、そのような機能の実現は難しいだろうと思います。

ということで、現状では以下のどちらかでやることになります。

* Swiper API を使って独自にコーディングする

* やりたいことができるスライダープラグインを探す

[対馬 俊彦]

クエリーループブロックに設定があります。

添付画像をご参照ください。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

仕様上はカテゴリーで絞り込んでもページ送りが表示されると思います。
（私のサイトでは表示されています）

該当する投稿の件数が少ないってことはないでしょうか？

[対馬 俊彦]

あっ…後者でクラス名の指定が抜けてるのにいま気づきました。訂正します😓

■カテゴリーアーカイブページの場合

body.archive:not(.paged) .vk_post {
    order: 2;
}
body.archive:not(.paged) .vk_post.category-pickup {
    order: 1;
}

:not(.paged) は要らないかもしれませんし、現実的な運用を考えると ↓ これだけでもいいのかもしれません。

.vk_post {
    order: 2;
}
.vk_post.category-pickup {
    order: 1;
}

[対馬 俊彦]

はい、こういうやりとりきらいじゃない、つしまでございます。

こんなやり方、いかがでしょうか？

■VK 投稿リスト の場合

.pickup-postlist .vk_post {
    order: 2;
}
.pickup-postlist .vk_post.category-pickup {
    order: 1;
}

pickup-postlist は VK 投稿リスト ブロックの 追加 CSS クラス、
pickup はピックアップ記事のカテゴリーのスラッグです。

■カテゴリーアーカイブページの場合

body:not(.paged) .vk_post {
    order: 2;
}
body:not(.paged) .vk_post.category-pickup {
    order: 1;
}

先頭に表示したいピックアップ記事が投稿リスト (後者の場合は1ページ目) に含まれない場合はダメですが、用途から考えるとそういう可能性は低そうなので、たぶんこれでいけるのではないかと…。

[対馬 俊彦]

ひとつの案です。

以下のフィルターフックで標準投稿の予約投稿を無効にできます。

function my_wp_insert_post_data( $data ) {
   if ( $data['post_type'] == 'post' && $data['post_status'] == 'future' ){
       $data['post_status'] = 'publish'; 
	}
   return $data;
};
add_filter( 'wp_insert_post_data', 'my_wp_insert_post_data' );

先頭に表示したい投稿を未来の日付で書けば、その日までは確実に先頭に表示されます。

すでに予約投稿を使っている場合はダメですけど…。

[対馬 俊彦]

横から失礼します。

質問は、（ブログのトップではなく）カテゴリーアーカイブページ または 特定のカテゴリーで絞り込んだときに先頭に表示したい、ということかもしれません。

[対馬 俊彦]

たぶん、スマホでもメニューがすぐに見えるようにしてほしい、という要望があったのだろうと推察します。

代替案として、ハンバーガーボタンを目立つようにするのはいかがでしょうか？

以下の CSS を追加すれば、ボタンが大きくなって、MENU と表示されます。

.vk-mobile-nav-menu-btn {
    text-indent: 6px;
    font-size: 12px;
    padding-top: 32px;
    width: 50px;
    height: 50px;
    background-size: 90%;
    background-position: top;
}
.vk-mobile-nav {
    padding-top: 70px;
}

[投稿者]

投稿