[キタジマ タカシ]

お待たせしました、下記のコードでアイコンを変更できます。子テーマの functions.php に記述してみてください。

add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
	if ( 'social-nav' !== $args->theme_location ) {
		return $item_output;
	}

	// もしリンク先 URL が 2inc.org を含んでいたら
	if ( false !== strpos( $item->url, '2inc.org' ) ) {
		// 地球アイコンを消す
		$item_output = str_replace( '<i class="fas fa-globe"></i>', '', $item_output );
		// Instagram アイコンに置換
		return str_replace( $args->link_before, '<i class="fab fa-instagram"></i>' . $args->link_before, $item_output );
	}

	return $item_output;
}, 11, 4 );

アイコンのサイズについては、下記の CSS を追加すれば変更できます。

.p-social-nav a {
  font-size: 1.5rem;
}

あと、Snow Monkey v3.5.1 からアイコンに色がつくようになりました。

♥ 0

Who liked: No user

[キタジマ タカシ]

インスタグラムのアイコンがWebっぽいのが表示されちゃうんですが、インスタアイコンの変更方法ってありますか？

QuiQui さんのサイトですよね？拝見したところ、Instagram 公式ではなくサードパーティーのサイトにリンクされているようで、そのため Instagram のサイトと判定されず地球アイコンになっています。Snow Monkey 側で対応するのはちょっと違う感じなので、子テーマの functions.php にコードを追加してアイコンを変更する方法をあとで書き込みますね。

あと、ちょっと小さくて気づかない可能性があるので、カラーバージョンと、サイズ変更ができるようになると嬉しいです。

これは確かにそうかもしれませんね…。大きさは CSS で変更できますが、色はちょっと面倒だと思うので、Snow Monkey 側でそれぞれの色になるようにしましょうかね。Twitter なら水色、Facebook なら青とか。次回アップデートで反映させます！

♥ 0

Who liked: No user

[キタジマ タカシ]

2つになった原因はちょっとわかりませんが、ファイルの編集については、WordPress 管理画面やファイルマネージャーではなく、テキストエディタ（Atom とか Sublime Text とか）で編集したものを SFTP ツールなどでアップロードするのが良いです。

管理画面で編集するとエラーなどが発生したときにサイトにログインできず結局エディタで編集してアップロードという流れになること、ファイルマネージャー経由だと文字エンコードの問題などが発生する可能性があること、という理由です。

とりあえず表示はされた、とのことなのでクローズします！

♥ 0

Who liked: No user

[キタジマ タカシ]

WordPress が変換しちゃうのでしょうね。セキュリティ対策なのかもしれません。こういうときは、ショートコードをつくるのが一番下と思います。

子テーマを使っている必要がありますが、子テーマの functions.php に

add_shortcode( 'test', function() {
	ob_start();
	?>
	<scrip>
	// ここに JavaScript のコード
	</scrip>
	<?php
	return ob_get_clean();
} );

test の部分がショートコード名になります。適当な名前に変えてください。そして、記事に [test] のようにいれると、JavaScript が埋め込まれる形で記事が表示されるかと思います。

追記：このサイトの WAF の影響で script と書くと送信できないので scrip と記述してます！実際には script と記述してください。

♥ 0

Who liked: No user

[キタジマ タカシ]

できたですか、良かったです！

♥ 0

Who liked: No user

[キタジマ タカシ]

v3.5.0 で修正いたしましたのでご確認ください！クローズしますね。

♥ 0

Who liked: No user

[キタジマ タカシ]

メニューの「ナビゲーションラベル」に次のように入力したとします。

<i class="fas fa-home"></i><span class="label">ホーム</span>

その想定で、次の CSS を追加してみてください。

.c-navbar__item > a {
  flex-direction: column;
}

.c-navbar__item > a > .label {
  display: block;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

特別な理由がない限り、背景画像の場合は wp_get_attachment_image_url()、画像をそのまま表示する場合は the_post_thumbnail() を使っています。CDN はどういうふうに画像の URL を置換しているのでしょうか？プラグイン利用、もしくはプロキシサーバー的なものを前段に置いているのですかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

この画像部分、特にこちらで特殊な実装をしているわけではなく、標準的な関数で URL を出力しているため、CDN（プラグインか何かが URL を置換するのですかね？）側の不具合なのではないかという気がします。

inc2734/wp-like-me-box

Contribute to inc2734/wp-like-me-box development by creating an account on GitHub.

github.com

一応、Snow Monkey 側は inc2734_wp_like_me_box_thumbnail というフックを通して URL を出力するので、子テーマを用意して頂き、そのフックを使って URL を整形すれば正しく表示させることができるのではないかと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

なるほどなるほど。常日頃 CSS 書いていると当たり前になってそのような需要を見落としてしまうので参考になります！マニュアルは、このフォーラムにカスタマイズ事例がたまってきているので、それをちゃんと記事化して追加したいなと考えています（なかなかできていませんが…）。その際はこれも追加します！

SnowMonkey以外のテーマでも使えるCSSなんですかね？

.l-sidebar-widget-area の部分がテーマによって違いますが、基本的な記述は同じです。.l-sidebar-widget-area の部分だけブラウザのデベロッパーツールなどで調べると良いかと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey　自体には無いのですが、思いつく方法としては次の2つがあります。

1. CSS で消す

次の CSS を追加していただくと、スマホでサイドバーのウィジェットエリアを消せます。767px の部分はお好みで調整してください！（767px 以下で非表示）

@media (max-width: 767px) {
  .l-sidebar-widget-area {
    display: none;
  }
}

2. プラグインを使う

僕は使ったことはないのですが、ウィジェットエリアの表示条件を指定できるプラグインがあるようです。

【WordPress】スマホとPCでウィジェットの表示を分けるプラグインWidget Logicの使い方！

  モバイルやスマホの通信速度が早くなったと言って…

blog.shuffleee.com

♥ 1

Who liked:

[キタジマ タカシ]

ぐわーすみません！ご報告ありがとうございます。修正できると思いますが、ちょっとお時間いただくかもしれません>< 次回アップデートで対応いたします。おまたせしてスミマセン！

♥ 0

Who liked: No user

[キタジマ タカシ]

v3.4.2 で修正いたしました。ご報告＆アドバイスありがとうございました！

♥ 0

Who liked: No user

[キタジマ タカシ]

なるほど！！ 今から調べていようかなと思ってここ開いたら、すでに調べて頂いたとのことですごく助かりました！近日中にアップデートかけます！

♥ 0

Who liked: No user

[キタジマ タカシ]

どのようにカスタマイズしたいかが、ユーザーによって異なる可能性が高いと思いますので、例えばカスタマイザーなどから文言変更できるようにしたりすると、カスタマイザー以外でカスタマイズしようとした場合に逆にカスタマイズのハードルが上がってしまう、などの問題も考えられます。

そういう面を考慮すると、やはり子テーマをつくって頂き、その中で 404 用テンプレートを上書きして頂くのがベターなのかなと。

子テーマをつくり、その中に snow-monkey/templates/view/404.php から 子テーマ/templates/view/404.php にファイルをコピーし編集することでカスタマイズが可能です。

子テーマの作り方はこちら

子テーマのつくり方

子テーマとは あなたが Snow Monkey のデザインやレイアウトを変更したいと思ったとき、CSS の追加…

snow-monkey.2inc.org

♥ 0

Who liked: No user

[投稿者]

投稿