[M T]

すみません、単純なミスでした。アイキャッチ画像は違う部分でした。
希望の通りにできました。ありがとうございました。

今回は、search.phpによる検索結果の別のテンプレートへの返しを教えていただき、templates/view/archive.phpを流用したファイルでカスタマイズしようとしましたが、詳細のhtml内容は、template-parts/loop/entry-summaryから読み込んでいるようなので、そのファイルを流用することになりそうです。ファイルを細分化しているのですね。勉強になりました。

♥ 0

Who liked: No user

[amakazusan]

ご返信ありがとうござます。

やりたかった内容としては、

デファクトのタイトルの大きさではスマホにすると大きかったので小さくしたいというものでした。

とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか？

コチラについては

@media screen and (max-width: 480px)
  .c-entry__title {
    font-size: 20px !important;
  }

を動作させたかったのですが、CSSがうまくどうさせずになやんでいました。

そこで、書かれていた

@media screen and (max-width: 480px) {
  .c-entry__title {
    font-size: 20px !important;
  }
}

の記述に変更したところ動作いたしました。

@media~{

}

が原因だったんでしょうか。

解決致しました。ありがとうござます。

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey のデフォルトは、

h1 {
  font-size: 1.66667rem; /* 26.66667px 相当 */
}

@media (min-width: 64em) {
  h1 {
    font-size: 2.5rem; /* 40px 相当 */
  }
}

となっています。これは、基本は 1.66667rem、画面の横幅が 64em 以上（PC サイズ）のときは 2.5rem になる、ということです。

.c-entry__title {
  font-size: 32px;
}

とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか？

ちなみに、

@media screen and (max-width: 480px) {
  .c-entry__title {
    font-size: 20px !important;
  }
}

は、画面幅が480px以下の場合は絶対的に 20px という意味になります。

♥ 0

Who liked: No user

[キタジマ タカシ]

Web フォントを使ったほうがキレイかも…とかはありますが、とりあえず標準的なものだと以下のような感じでしょうか。カスタマイザー > 追加 CSS、もしくは子テーマの CSS ファイルに下記を貼り付けてみてください。

/* 記事タイトルを明朝体に */
.c-entry__title {
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

♥ 0

Who liked: No user

[M T]

ありがとうございました。読み込みがうまくいきました！

この独自のテンプレートsearch-form0.phpだけでは、多分内容を変えられないので、テンプレート内<?php get_template_part( ‘template-parts/loop/entry-summary’, get_post_type() ); ?>に記載のある、entry-summary.phpに代わる別のテンプレートを作成して、内容やデザインをカスタマイズするという理解でよろしいでしょうか。

検索結果から、アイキャッチ画像や投稿日などを消したかったので、実際にentry-summary.phpを別のファイル名にして子テーマに置いて、該当部分（以下）を外してみたのですが、消えません。何か他のファイルが優先されているのでしょうか。
追加したテキストなどは読み込んでいるので、ファイルは読み込んでいると思います。
ファイル構造が十分に理解できておらず、質問が長くなってすみません。

消したのは以下です。
<div class=”c-entry-summary__meta”>
<ul class=”c-meta”>
<li class=”c-meta__item c-meta__item–author”>
<?php echo get_avatar( $post->post_author ); ?><?php echo esc_html( get_the_author() ); ?>

<li class=”c-meta__item”>
<?php the_time( get_option( ‘date_format’ ) ); ?>

</div>

♥ 0

Who liked: No user

[キタジマ タカシ]

通常の検索フォームは読み込むようになりましたが、検索フォームプラグインを使った時は、何も表示されません

あ！ 読み込み部分が間違っていたかもしれません。下記のコードに差し替えてみてください。

<?php
$controller = new Mimizuku_Controller();
$controller->layout( get_theme_mod( 'archive-page-layout' ) );
if ( have_posts() ) {
	if ( $_GET['fe_form_no'] == '0' ) {
		// /子テーマ/templates/view/search-form0.php をビューファイルとして読み込み
		$controller->render( 'search-form0' );
	} else {
		// デフォルトのビューファイルを読み込み
		$controller->render( 'archive', 'search' );
	}
} else {
	$controller->render( 'no-match' );
}

search-form0.phpは、とりあえずtemplates/view/archive.phpの内容をそのまま使っていますが、それでよいのでしょうか。

この分岐コードは「検索内容によってページのデザインを変える」ために読むテンプレートを切り替える、というものだと思いますので、ご希望のデザインなどに応じてカスタマイズが必要なのではないでしょうか？

♥ 0

Who liked: No user

[M T]

※うまく送信できないので、一部記号を変えてあります。
<?phpに変更で、通常の検索フォームは読み込むようになりましたが、検索フォームプラグインを使った時は、何も表示されません。（子テーマのsearch.phpを外してやってみると、通常の検索結果画面が表示されます。）

search-form0.phpは、とりあえずtemplates/view/archive.phpの内容をそのまま使っていますが、それでよいのでしょうか。

search.phpは前回送っていただいたものから以下を除いたものです。

} else if( $_GET[‘fe_form_no’] == ‘1’ ) {
// /子テーマ/templates/view/search-form1.php をビューファイルとして読み込み
get_template_part( ‘search’, ‘form1’ );

 

♥ 0

Who liked: No user

[キタジマ タカシ]

検証しました。ちょっと現状の Snow Monkey ではできないのですが、v4.3.0 ベータ3からはできるようになります。ということで、一応先にコードだけ提示しますね。

子テーマの functions.php

/**
 * [my-accordion] というショートコードを定義
 */
add_shortcode( 'my-accordion', function() {
	ob_start();
	?>
	ここに参考ページの HTML を貼り付け
	<?php
	return ob_get_clean();
} );

/**
 * Snow Monkey ウィジェットでショートコードを実行可能に
 */
add_filter( 'inc2734_wp_awesome_widgets_render_widget', 'do_shortcode' );

CSS を追加

カスタマイザー > 追加 CSS、もしくは、子テーマの　CSS ファイルに、参考ページの CSS を貼り付け

リード文に入力

[my-accordion] と入力してください。

♥ 0

Who liked: No user

[M T]

ありがとうございます。ただ、実際に検索してみると、通常検索、プラグイン検索ともにsearch.phpの生コードが表示されてしまいます。

/子テーマ/search.phpに、検索フォームが１つだけのため

} else if( $_GET[‘fe_form_no’] == ‘1’ ) {
get_template_part( ‘search’, ‘form1’ );　を除いた上記のコードを記述、

/子テーマ/templates/view/search-form0.php　を設置

（search-form0.phpはtemplates/view/archive.phpをコピーして名前変更）しました。

 

 

♥ 0

Who liked: No user

[キタジマ タカシ]

ショーケースのリード文は、「WordPress の記事編集画面で許可されている HTML のみ入力可能」で「自動改行が有効」となっており、input タグが入力できず、複雑な HTML を入力するのにあまり向いていないため、基本的には、このアコーディオンを入れることはおすすめできません。

という前提で、一応やる方法はあるので、共有します。

子テーマの functions.php に下記のコードを追加

まず、input タグが除去されないように許可する必要があります。下記のコードを追加することで許可されるようになりますが、これは「リード文」の部分だけでなく、WordPress 全体で許可される、ということになり、セキュリティ上好ましくない可能性がありますので、繰り返しますがあまりおすすめはできません。

add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {
	if ( 'post' === $context ) {
		$tags['input'] = [
			'type'  => true,
			'id'    => true,
			'class' => true,
		];
	}
	return $tags;
}, 10, 2 );

リード文に HTML を入力

自動改行の影響を極力避けるため、 HTML コメントと改行を全部抜いて入力してください。下記をコピペしてもらうのが良いかと思います。

<div class="accbox"><div><label for="label1">クリックして表示1</label><input type="checkbox" id="label1" class="cssacc" /><div class="accshow"><p>こんにちは1</p></div></div><div><label for="label2">クリックして表示2</label><input type="checkbox" id="label2" class="cssacc" /><div class="accshow"><p>こんにちは2</p></div></div><div><label for="label3">クリックして表示3</label><input type="checkbox" id="label3" class="cssacc" /><div class="accshow"><p>こんにちは3</p></div></div><div><label for="label4">クリックして表示4</label><input type="checkbox" id="label4" class="cssacc" /><div class="accshow"><p>こんにちは4</p></div></div></div>

CSS を追加

カスタマイザー > 追加CSS、もしくは子テーマの CSS ファイルに下記の CSS を追加してください。自動改行の影響を考慮して、元の CSS から若干カスタマイズしてあります。

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + p + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

いろいろやり方はあると思いますが、Snow Monkey のテンプレート階層の流儀に従うなら下記のような感じになると思います。

/子テーマ/search.php

layout( get_theme_mod( 'archive-page-layout' ) );
if ( have_posts() ) {
	if ( $_GET['fe_form_no'] == '0' ) {
		// /子テーマ/templates/view/search-form0.php をビューファイルとして読み込み
		get_template_part( 'search', 'form0' );
	} else if( $_GET['fe_form_no'] == '1' ) {
		// /子テーマ/templates/view/search-form1.php をビューファイルとして読み込み
		get_template_part( 'search', 'form1' );
	} else {
		// デフォルトのビューファイルを読み込み
		$controller->render( 'archive', 'search' );
	}
} else {
	$controller->render( 'no-match' );
}

♥ 0

Who liked: No user

[M T]

メタスライダーをfunction.phpで読み込んでカスタマイズ（最上部に配置）していたのに、ホームページ上部のウジェットエリアにもメタスライダーを配置していました。

これを外して修正できました。ありがとうございました。お騒がせしました。

逆に前のバージョンの時に問題なかったのが不思議です。

 

♥ 0

Who liked: No user

[キタジマ タカシ]

ウィジェットのクラス名から推測するに、MetaSlider のウィジェットが入っているように思います。MetaSlider 14205 not found とあるので、MetaSlider には詳しくないのですが、存在しない MetaSlider を読み込もうとして、その分の余白が表示されているのではないでしょうか？

♥ 0

Who liked: No user

[M T]

補足ですが、サイドバーは正常で、TOPページのメインコンテンツの一番上に余白が入りました。ちょど画像の緑色の部分です。

緑色の部分は、ディベロッパーツールで画面が特定の幅の時にしか表示されません。

その時のhtmlは以下のようになっていました。

<div id=”metaslider_widget-2″ class=”c-section widget_metaslider_widget”><!– MetaSlider 14205 not found –></div>

♥ 0

Who liked: No user

[M T]

白くなったサイトも購入した時の旧バージョンに戻していたので、beta2で大丈夫でした。

ただ、ヘッダー画像の直下に大きな余白が出来てしまいました。
モバイルの場合は、さらに高さがあり、見た目がおかしくなってしまいました。
PC表示の場合のディベロッパーツールで余白をクリックした時の写真です。
CSSで消そうとしましたがうまくいきません。

ヘッダー画像は、カスタマイズで教えていただいたメタスライダーを使い、左右がフルサイズ。記事部分は2カラムです。
記事部分の一番大きなタイトルは一行だったのが、最後の文字が改行されてしまいました。（写真では一行になっています）
余白を消したいのですが、よろしくお願いいたします。

♥ 0

Who liked: No user