add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
上記がローディングを追加している部分ですね。なので現象はこのローディング処理の不具合なのかなと思うのですが、これを調査・修正するのは時間がかかるので、お急ぎ or ローディングが不要であればこの部分のコードを削除されると良いかと思います!
お返事ありがとうございます。ここで公に出来なくて…申し訳ありません。(キタジマ様に直接メールでお知らせすることは出来るのですが…。)
プラグインはこれしか入れていないので、ローディングが追加されるということはないと思っているのですがどうなんでしょうか。
ちなみにMy snow monkeyは下記の状態です。
/**
* Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
*/
$theme = wp_get_theme( get_template() );
if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) {
return;
}
/**
* Directory url of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );
/**
* Directory path of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style(
'my-snow-monkey',
untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/style.css',
[ Framework\Helper::get_main_style_handle() ],
filemtime( plugin_dir_path( __FILE__ ) )
);
}
);
// エディター用の CSS 読み込み
add_action(
'after_setup_theme',
function() {
add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
}
);
キタジマさん
add_action は任意のフックポイント(ここでは snow_monkey_prepend_body や snow_monkey_prepend_contents)で処理を実行したり、HTML を追加するものになるので削除はできません。
基本的には、既存の Snow Monkey の HTML を削除したり書き換えたりする場合は snow_monkey_template_part_render フィルターフックを使ったり、My Snow Monkey や子テーマを使ってテンプレートを上書き(同名のファイルを My Snow Monkey や子テーマに配置したら Snow Monkey のテンプレートではなくそのテンプレートが使用されるという仕組み)で対応することになります。
理解できた・・・と思います。勉強になりました!(フィルターフックはまだわかっていないので、これから勉強します)
ありがとうございましたm(_ _)m
と考えているのですが・・・
add_action
は任意のフックポイント(ここでは snow_monkey_prepend_body
や snow_monkey_prepend_contents
)で処理を実行したり、HTML を追加するものになるので削除はできません。
基本的には、既存の Snow Monkey の HTML を削除したり書き換えたりする場合は snow_monkey_template_part_render
フィルターフックを使ったり、My Snow Monkey や子テーマを使ってテンプレートを上書き(同名のファイルを My Snow Monkey や子テーマに配置したら Snow Monkey のテンプレートではなくそのテンプレートが使用されるという仕組み)で対応することになります。
こちらのトピックが参考になると思います。
アクションフックの使い方を教えていただいたのですが、コードの追加ではなく差し替え(削除)の場合どうすればいいでしょうか?
いずれにしても my-snow-monkey
での対応になると思いますが、少し面倒だった記憶があります。
その当時に制作したサイトですが、こんな動きですかね?
カスタマイザーの【PC 用ヘッダー位置】を見たら、【ノーマル】になっていました。
また、my-snow-monkey
を確認したら、アクションフック snow_monkey_prepend_body
を用い is_front_page()
を条件に トップページ用ロゴ、スライダー(XO Slider プラグイン)、キャラクター画像をヘッダーの前に入れていました。
WordPressの公式フォーラムで相談するべきなのか悩みました。
もしSnow Monkeyのサポートの範疇でなければおっしゃってくださいm(_ _)m
【お使いの Snow Monkey のバージョン】17.2.8
【お使いの Snow Monkey Blocks のバージョン】16.1.0
【お使いの Snow Monkey Editor のバージョン】8.0.2
【お使いのブラウザ】Chrome
【当該サイトのURL】https://busiani.com/
### 実現したいこと
下図の通り、ヘッダーとメインビジュアルの場所を入れ替えたいです。
その後ヘッダーはブラウザの上部に到達した時点で固定表示させたいです。(これはstickyで実現できるのではと思っています。)
### 発生している問題
以前、ここのフォーラムでアクションフックの使い方を教えていただいたのですが、コードの追加ではなく差し替え(削除)の場合どうすればいいでしょうか?
### 試したこと
以前教えていただいたコードと https://happy-snow-monkey.olein-design.com/try-snow-monkey-hooks を眺め
add_action(
'snow_monkey_prepend_body',
function() {
既存の要素の削除の仕方?
}
);
add_action(
'snow_monkey_prepend_contents',
function() {
headerの追加の仕方?
}
);
と考えているのですが・・・
いくつか改善策として考えられるのは以下でしょうか・・・
- Snow Monkeyデフォルトのローディング画面を利用してみる
- 別の有料Webフォントサービス(FONT PLUSやTypeSquare)を利用する
※筑紫丸ゴシックにこだわるならFONT PLUSでしょうか?
- 丸ゴシックで良ければGoogle Fontsも検討してもらう
1.Snow Monkeyデフォルトのローディング画面を利用してみる
以下を my-snow-monkey.php
に記述することでローディング画面が実装できます。
add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
私のオンラインショップがこのローディング画面+Adobe Fontsでつくってありますが、場合によっては一瞬デバイスフォントが表示されたあとに切り替わります。
2.別の有料Webフォントサービス(FONT PLUSやTypeSquare)を利用する
書体にこだわるなら、有料のサービスも視野に入れてみてはいかがでしょうか。
クライアントのサイトでFONT PLUSを使用していますが、読み込みが速いのか、ほとんどデバイスフォントは表示されません。
3.丸ゴシックで良ければGoogle Fontsも検討してもらう
Google Fontsも利用できる日本語フォントが増えましたので、サイトのイメージに合うものがあれば選択肢のひとつとして検討いただくのも良いと思います。
ご存知かと思いますが、クライアントがAdobeライセンスを持っていない場合、AdobeのWebフォントを利用するのはライセンス違反になりますのでご注意ください。
【お使いの Snow Monkey のバージョン】16.5.4
【お使いの Snow Monkey Blocks のバージョン】15.0.6
【お使いの Snow Monkey Editor のバージョン】7.0.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://next-gear.jp/
### 実現したいこと
my-snow-monkeyの紹介ブログにあるローディング画面を実装したい。
### 発生している問題
の「カスタマイズしてみる」をに沿って実行してみましたが、
ローディング画面が出現しません・・・
### 試したこと
・my-snow-monkeyのプラグインが有効になっているか再度確認
・過去の質問でディレクトリの間違いでCSSが解決した記事があったのでディレクトリの確認
⇨ディレクトリは問題なさそうでCSSも正常に動いています。
⇨WordPress管理画面⇨プラグイン⇨プラグインファイルエディター⇨My Snow Monkey⇨my-snow-monkey.phpの中にちゃんと読み込めているか確認しました。
・var_dump(11111);を記述すると画面の一番上にint(11111)と出たのでphpは読み込めていると思います。
・FTPやWordPressから直接でPHPコードをもう一度張り替えてみましたが変化はなかったです。
・コンソールエラーはありませんでした。
下記は現時点の中身です。(ブログのままです。)
<?php
/**
* Plugin name: My Snow Monkey
* Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
* Version: 0.2.1
*
* @package my-snow-monkey
* @author inc2734
* @license GPL-2.0+
*/
/**
* Snow Monkey 以外のテーマを利用している場合は有効化してもカスタマイズが反映されないようにする
*/
$theme = wp_get_theme( get_template() );
if ( 'snow-monkey' !== $theme->template && 'snow-monkey/resources' !== $theme->template ) {
return;
}
/**
* Directory url of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );
/**
* Directory path of this plugin
*
* @var string
*/
define( 'MY_SNOW_MONKEY_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
// ここから追加
add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
// 実際のページ用の CSS 読み込み
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style(
'my-snow-monkey',
MY_SNOW_MONKEY_URL . '/style.css',
[ Framework\Helper::get_main_style_handle() ],
filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
);
}
);
// エディター用の CSS 読み込み
// クラシックエディターとブロックエディターの両方に CSS が読み込まれます。
// ブロックエディターの場合は自動的に .editor-styles-wrapper でラップされます。
// 依存関係は指定できません。
add_action(
'after_setup_theme',
function() {
add_theme_support( 'editor-styles' );
add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
}
);
>キタジマさん
ご確認いただきありがとうございます。
snow_monkey_prepend_body
とwp_footer
どちらでもバナー表示されました!
ページレイアウトごとに実行されるフックが違ったのですね。勉強になりました。
GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインのほうではまだ表示できていませんが、こちらもフックで解決できる問題でしょうか?
ともかく、当初の目的通りの表示はできました。ありがとうございました。
あーなるほど! フックの場所を snow_monkey_prepend_body
か wp_footer
にするとどうでしょうか? snow_monkey_before_contents_inner
はランディングページ系のページテンプレートでは実行されないのでした。
こんにちは。
こちらのトピックが参考になると思います。
でもご提示のレイアウトだと、フックで入れたほうが良い気もします。
フックは、上記でサンプルコードが掲載されていますので、my-snow-monkey.php(プラグイン)に追加してみてください。
クルクルマークはローディングのエフェクトだと思います。
子テーマか My Snow Monkey に下記のようなコードがあると思うので、それを消すのが確実だと思います。
add_action(
'snow_monkey_prepend_body',
function() {
?>
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
<div class="c-circle-spinner"></div>
</div>
</div>
<?php
}
);
こんな感じに PHP で function の中で条件分岐をされると良いでしょう。
add_action(
'snow_monkey_prepend_body',
function () {
if ( is_front_page() ) {
?>
<div class="c-hsm-message-box c-hsm-message-box_invert p-hsm-drawer">
<p>こちらに何か表示させたい場合は、<a href="<?php echo esc_url(home_url(‘/snow_monkey_prepend_body’)); ?>”>こちらの記事を参照してください!</p>
</div>
<div id="splash">
<div id="splash-logo">
<p><span class="slide-in slideAnimeLeftRight"><span class="slide-in_inner slideAnimeRightLeft">NeaRMaiN</span></span></p>
</div>
</splash–>
</div>
<div class="splashbg1"></div>
<div class="splashbg2"></div>
<!—画面遷移用–>
<?php
}
}
);
【お使いの Snow Monkey のバージョン】 15.8.1
【お使いの Snow Monkey Blocks のバージョン】12.4.0
【お使いの Snow Monkey Editor のバージョン】 6.1.0
【お使いのブラウザ】Chrome
【当該サイトのURL】https://nearmain.net/
### 実現したいこと
ローディング画面を作りたい。
フロントページにのみローディング画面が表示されるようにしたいです。
body直下にhtmlを記述できればできるのでは?と考えています。
### 発生している問題
フロントページ以外でもローディング画面が表示されてしまいます。
### 試したこと
いつもお世話になっております。
オレインさんのサイトを見ながらアクションフック「snow_monkey_prepend_body」を使い作成しました。
ただこれだとフロントページ以外にも反映されてしまいます。そうするとCSSが当たっていないので、ローディング画面がフェードアウトできない状況です。
その他に何か良いやり方はあるでしょうか??
よろしくお願いいたします。
以下、my-snow-monkey.php
に記述
add_action(
'snow_monkey_prepend_body',
function () {
?>
<!--
<div class="c-hsm-message-box c-hsm-message-box_invert p-hsm-drawer">
<p>こちらに何か表示させたい場合は、<a href="<?php echo esc_url(home_url('/snow_monkey_prepend_body')); ?>">こちら</a>の記事を参照してください!</p>
</div>
-->
<div id="splash">
<div id="splash-logo">
<p><span class="slide-in slideAnimeLeftRight"><span class="slide-in_inner slideAnimeRightLeft">NeaRMaiN</span></span></p>
</div>
<!--/splash-->
</div>
<div class="splashbg1"></div>
<div class="splashbg2"></div>
<!---画面遷移用-->
<?php
}
);
出来るか出来ないかで言うと出来るんですが、その場合 My Snow Monkey にカスタマイズのコードを書くことになります。
そうすると、ヘッダーコンテンツをメニューの上に移動させるよりも snow_monkey_prepend_body のフックを使ってコンテンツを追加するほうが簡単です。
GONSYさんも書かれているように、具体的に何を表示したいのかが分かれば回答しやすいですね。