いくつか方法が考えられます。
## カスタム HTML ブロックを使う
これが1番簡単です。ホームページに割り当てた固定ページの編集画面で、カスタム HTML ブロックをいれて、そこに任意の HTML を書く方法です。PHP は書けないので、PHP も書きたい場合は他の方法が必要になります。
## 子テーマを使う
子テーマをお使いであれば、子テーマの中にトップページ用のテンプレートを作ることで、元のテンプレートを上書きできます。子テーマの中に /templates/view/front-page.php をつくって、そこに任意の HTML や PHP を書いてみてください。
## My Snow Monkey プラグインを使う
既に制作が進んでいて子テーマに切り替えられない場合は My Snow Monkey プラグインでもテンプレートの上書きができます。
まず、下記を参考に My Snow Monkey プラグインでテンプレートの上書きができるように準備をしてください。
できたら、plugins/my-snow-monkey/view というディレクトリ内にテンプレートを作ることで元のテンプレートを上書きできるようになるので、plugins/my-snow-monkey/view/templates/view/front-page.php をつくって、そこに任意の HTML や PHP を書いてみてください。
多分ブロックの ID は block-a08315cc-〜 となっていると思うので、smb-tab-for-block-a08315cc-〜 とするとどうでしょうか？
要望にお応えいただき、ありがとうございます。
早速、２箇所で試してみたのですがうまく動作しません。
- １箇所目は、メニューの項目
- ２箇所目は、テキストのリンクを編集
から設定しました。
１箇所目 メニューの項目
リリース記事を参考に、https://example.com/#smb-tab-for-xxxxxとなるように、
URLを入力したのですが動作しません。
２箇所目 テキストのリンクを編集
フッターのリンクを編集したのですが、こちらも動作しません。
設定方法について誤解している可能性があるため、もし誤った設定を行っていたり、間違った箇所があれば、教えていただけますと幸いです。
Snow Monkey Blocks v22.2.0 で機能を追加してみました。
アップデートして試してみてください！
キタジマ様
ご返信が遅くなってしまい申し訳ございません！
・トップページだけはブロックエディターを使わずに独自にコーディングして実装したい、
ということですかね？
▶︎まさにその内容になります！
テーマはスノーモンキーを使って、
・トップページだけはブロックエディターを使わずに独自にコーディングして実装したい
・下層はブロックエディターを使いたい
という趣旨になります。
が、上記手法で作ったサイトなのですが、
制作途中にテーマの更新でヘッターに不具合が生じたことがありました。
そのため、
・トップページだけはブロックエディターを使わずに独自にコーディングして実装したい
・下層はブロックエディターを使いたい
という場合は、下記のようにエレメンターで作ることが多いです。
しかし、日本国内のお客様の場合は、
スノーモンキーで作って欲しい！というご要望が多くあり、
弊社としてもスノーモンキーで下層を作ることの保守管理上のメリットが多いことを痛感しており、
テーマはスノーモンキーを使って、
・トップページだけはブロックエディターを使わずに独自にコーディングして実装したい
・下層はブロックエディターを使いたい
という強い意志を持っており、これから制作する美容クリニックはその手法で作りたいと思っています。
開発者様のご助言や注意点、留意事項、こうやったらいいんじゃない？みたいな助言をいただけると
本当に幸いでございます。
キタジマ様の貴重なお時間をとらせてしまうこと、本当に申し訳ございません。
何卒、ご返答いただけますと幸いでございます。
以下で、ショートコードでもできるようになりました！
// 個別ページをショートコードに
function display_page_content_by_id($atts) {
$atts = shortcode_atts(
array(
‘id’ => ”,
),
$atts,
‘page_content’
);
if (empty($atts[‘id’])) {
return ”;
}
$page = get_post($atts[‘id’]);
if (!$page || $page->post_status != ‘publish’) {
return ”;
}
return apply_filters(‘the_content’, $page->post_content);
}
add_shortcode(‘page_content’, ‘display_page_content_by_id’);
// ドロワーに個別ページを入れる
add_action( ‘snow_monkey_prepend_drawer_nav’, function() {
echo apply_filters( ‘the_content’, ‘[page_content id=”ページのID”]’ );
}
);
ありがとうございました。トピックを閉じます。
グローバルヘッダーでデザインが「シンプル」なら、これですかね。
snow_monkey_template_part_render_templates/layout/header/simple
トピックのはじめに提示されているコードは、そのまま活かせると思います。
snow_monkey_template_part_render_template-parts/content/entry/header/header
は、投稿の詳細ページのタイトル部分（以下画像の青枠）になりますが、間違いないでしょうか？
ご提示のコードで、ショートコードが正しく認識できていれば挿入・表示は可能だと思います。
ヘッダー部にショートコードを挿入したく、
ヘッダー部の場所がいまいちわかりませんでした。
サイトのスクリーンショットもしくはワイヤーなど、挿入したい箇所を具体的にご提示されたほうが、適切な回答が得られると思います。
お忙しいところご返信ありがとうございます！
以下に新しいトピックを立てさせていただきました。（不具合とは少し違うかもしれないので悩みましたが同じカテゴリで立てさせていただきました）
何卒よろしくお願い申し上げます。
アップデートで解消しました！
素早いご対応をありがとうございます。
コンテンツスライダーブロックについてもう一つ質問させてください。
トピックを変えた方がよろしければ新しいものを立ち上げます。
コンテンツスライダーブロックで、ブロック全体がリンクになるようcssを適用しています。
しかし、2回クリックしないとリンクが開きません。
多分、スライダーの機能と相性が悪いように思います。
1回クリックでリンクが開く方法がございましたらご教授いただければ幸いです。
検証したこと
・矢印を表示：2回クリックしないとリンクが開きません
・ドットを表示：2回クリックしないとリンクが開きません
・何もせず何回かリロードしたりすると何かのタイミングで1回でリンクが開くこともあります。
「コンテンツスライダー」の「スライド」の中身
・グループ（文章と画像を記載）
・段落（リンクを記載。cssのクラスはcontents-slider-link-url）
「コンテンツスライダー」の「スライド」に適用しているCSS
cssのクラスは「contents-slider-link」
.contents-slider-link{
position: relative!important;
}
.contents-slider-link p.contents-slider-link-url {
position: absolute!important;
top:0!important;
left: 0!important;
width: 100%!important;
height: 100%!important;
z-index:999!important;
}
.contents-slider-link a {
position: absolute!important;
top:0!important;
left: 0!important;
width: 100%!important;
height: 100%!important;
z-index:999!important;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
※上記cssは編集画面には適用されないようにしています。
お世話になります。
お忙しいところご返信いただきましてありがとうございます。
以下のようにしてみましたが、この場合エラーになり保存できませんでした。
'slug' => 'default' がエラーのようでした。
syntax error, unexpected single-quoted string "slug", expecting ")"
// 固定ページのスラッグ名をショートコードにする[page_scode slug="aaa"]
function page_content_include($atts) {
extract(shortcode_atts(array(
'slug' => 'default'
), $atts, 'page_scode'));
ob_start();
$page_info = get_page_by_path( $slug );
$page = get_post($page_info);
ob_end_clean();
return do_shortcode( $page->post_content );
}
add_shortcode('page_scode', 'page_content_include');
// ドロワーに個別ページを入れる
add_action( 'snow_monkey_prepend_drawer_nav', function() {
echo apply_filters( 'the_content', '[page_scode slug="aaa"]' );
}
以下のコードで表示されました。
function page_content_e( $page_path, $post_type = ‘page’ ) {
$page = get_page_by_path( $page_path, OBJECT, $post_type );
if ( $page && $page->post_status == ‘publish’ ) {
echo apply_filters( ‘the_content’, $page->post_content );
}
}
add_action( ‘snow_monkey_prepend_drawer_nav’, function() {
?>
<?=page_content_e( ‘navigation’ )?> <?php
}
Snow Monkey は、HTML 要素の属性として、スクロールしているかしていないかを判別する data-scrolled というものを持っています。
なのでスマホのときだけ、スクロール時にお知らせバーを消したいということであれば下記の CSS で実現できます。
/* 画面幅が640px以下のときだけ */
@media not all and (min-width:640px) {
/* スクロール時だけ */
[data-scrolled=true] {
/* お知らせバーを非表示 */
.p-infobar-wrapper {
display: none;
}
}
}
が、実際、スクロール時に消えるとすると、1pxでもスクロールした瞬間にパッと消えて、お知らせバー分の高さがなくなるわけなので、かなりガクついてしまいます。例えばスマホのときに未スクロールであれば画面下部に fixed 表示にするとか、何か調整が必要な気がします…。
あ、PHP は <?php と ?> で囲まれた部分でのみ実行されるので、こういう感じにしないとです。下記で試してみてください！
add_action( 'snow_monkey_prepend_drawer_nav', function() {
echo apply_filters( 'the_content', '[page_scode slug="表示させたいスラッグ名"]' );
}
大変お世話になります。
ご返信ありがとうございます。
ショートコードの方法は、コードがそのまま掲載されてしまい出来ませんでしたが、以下の方法で叶いました！
セキュリティなど特に問題はないでしょうか？
function page_content_e( $page_path, $post_type = 'page' ) {
$page = get_page_by_path( $page_path, OBJECT, $post_type );
if ( $page && $page->post_status == 'publish' ) {
echo apply_filters( 'the_content', $page->post_content );
}
}
add_action( 'snow_monkey_prepend_drawer_nav', function() {
?>
<?=page_content_e( 'navigation' )?> <?php
}
ホームページに割り当てた固定ページのテンプレートが「デフォルトテンプレート」以外になっている場合は、デフォルトテンプレートに変更してみてください。
すべてのセクションで1280pxの横幅にしているのですが、
横幅（コンテンツの最大幅）は特に不要なら指定しないほうが良いかもです。もしサイト全体の横幅を1280px以上にしたときに全部変更しないといけなくなる可能性があるので。絶対に1280pxにしないといけないという要件があるようであればそのままで大丈夫だと思います。
