フォーラムへの返信
-
投稿者投稿
-
おそらくもっとスマートなやり方はあるとは思いますが、単純にjQueryでCSSクラスを指定して文字列を置き換える方法が簡単かもしれません。
My Snow Monkeyなどを用意してJavaScriptを利用できる環境を用意してください。
その上で、箇所を指定して(今回の場合だと、
.wpaw-pickup-slider__item-more
というCSSクラスが付与されている場所なる)文字列を置き換える処理を加えると良いでしょう。.replace()
とかが使えるかもしれません。(自分で試していないのですいません…一度お試しくださいませー
♥ 1いいねをした人: 居ません@media ( max-width:670px ) { }
だけでは何も変わりませんね。この中に何かしらCSSを記述する必要があります。
例えば、
@media ( max-width:670px ) { body { background-color: red; } }
こう記述することで、ブラウザ幅が670px以下の場合に、
body
タグにbackground-color
が適応されます。言い換えると、ブラウザ幅が671px以上であれば動作しません。ですので、メディアクエリの中に任意のCSSを記述してください。
こちらの記事も参照になるかもしれませんね。
♥ 0いいねをした人: 居ませんこんな感じですかねぇ。
/** * <head>〜</head>内にAdobe Fonts Scriptを挿入する **/ add_action( 'wp_head', function() { ?> <script> (function(d) { var config = { kitId: ‘emv8xxp’, scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,””)+” wf-inactive”;},config.scriptTimeout),tk=d.createElement(“script”),f=false,s=d.getElementsByTagName(“script”)[0],a;h.className+=” wf-loading”;tk.src=’https://use.typekit.net/’+config.kitId+’.js’;tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!=”complete”&&a!=”loaded”)return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document); </script> <?php } );
Font AwesomeなどはCSSファイルを読み込む形でフォントを提供してくれたりしますが、その場合には @キタジマタカシ さんが書かれているような形でファイルを指定して読み込む方法が推奨されます。
Adobe Fontsのように
<script>〜</script>
タグで読み込む場合には、それをJavaScriptファイルを作成して記載して、wp_enqueue_scripts
で読み込むか、僕が書いたような感じで<script>〜</script>
を直接wp_head()
に挿入してしまうかのどちらかかなと思います。個人的には前者をお勧めしますが、技術的に難しい場合は後者で対応することも可能です。参考にしてみてください。
ありがとうございます!それでなんとかなりそうです!
良さげなサードパーティプラン考えてみます!トピ閉じさせていただきます!
♥ 1いいねをした人: 居ません@キタジマタカシ さん
ということは逆にサブスク外れている人の表記は何になりますかねぇ?
♥ 0いいねをした人: 居ませんお二方ありがとうございます。
というのも、ちょっと考えていたのが、何かしら僕の方でサービスを提供しようとした際に、仮に利用条件に「現在Snow Monkeyサブスクリプションを利用されている方」というようにした場合、僕の方でその状況を確認できる術があるかどうかを考えていました。
しかし、現状あまりこねくり回すつもりはないので、今の所はないという判断をした方が良いかもしれませんね。
@キタジマタカシ 氏
GitHub なんかだと、有料会員は「PRO」の表記がでるので、同じような感じで名前のところとかに表記が出るようにしても良いかもですね。
この対応をしていただけるならば、そういった際に公式フォーラムのアカウントURLを聞いてこちらが確認するだけで問題ないのでうれしいところです!
♥ 0いいねをした人: 居ません@キタジマさん
おおおー!!そうなんですね!!であれば分岐すら必要ない…!!すごい!!素敵!!!
@snow_coding さん
ご希望通りできたとのことで良かったですー!僕も一つ勉強することができました!ありがとうございます!!
♥ 1いいねをした人: 居ません確かに、階層が間違っており、archive.phpと同階層にarchive-menu.php を作成したところ、アーカイブページがarchive-menu.phpで表示されました。内容は以下の通りです。
カスタム投稿タイプのスラッグは
menu
ということですかね?それでarchive-menu.php
を作られたという流れとお察ししました。実際にこちらでテストをしたわけではないのですが、カスタム投稿タイプ
menu
の一覧ページにて、冒頭添付画像のようにタイトル(画像では「商品1」)とあり、その付近(タイトルの下とか?)にカスタムフィールド値を出力されたいのであれば、archive.php
ではなくtemplate-parts/loop/entry-summary/content/content.php
辺りを用意して、カスタム投稿タイプのアーカイブ表示時という条件分岐を入れて、カスタムフィールド出力部分を作成するというような形で実現できないでしょうか?ちなみにですが、カスタム投稿タイプのアーカイブかどうかの条件分岐には
is_post_type_archive()
が利用できるかと思います。参考になれば幸いです。
追伸
初心者で申し訳ございません。
全く悪いことではありませんよ!僕もまだまだ初心者です。
♥ 2いいねをした人: 居ませんスライダーブロックもピックアップスライダーブロックもベースにしているライブラリは同じなので、同様に難しという見識を個人的には持っています。
ですので、Snow Monkey Blocks以外のスライダーを提供してくれるカスタムブロックを持つプラグインを利用した方が良いかもしれませんね。
♥ 0いいねをした人: 居ません私の確認したところではありますが、ピックアップスライダーブロックでご希望のアニメーションを実現するのは難しいような気がします。
設置した任意のタグをスライダー形式に表示してくれるプラグインを探して代用する方がスムーズかもしれませんね。
♥ 0いいねをした人: 居ませんtemplate-parts>archive>entry>archive.phpをコピーして、
archive-menu.phpというファイルを作成しましたが、その先どうしたらよいかわからず質問しました。恐らく上記の場所には
archive.php
は存在しないと思います。template-parts/archive/entry/content.php
などでしょうか?また、テンプレートをコピーしてMy Snow Monkeyや子テーマで上書きする場合には、親テーマに存在するファイル名と同じファイル名でないと上書きされません。
ですので、例えば上記のように
template-parts/archive/entry/content.php
のテンプレートを上書きしたいのであれば、同じ階層で同じファイル名のテンプレートファイルを用意する必要があります。また、
custom post type UI でアーカイブページを表示させると、以下のように表示されます。今1つしか入れていませんが、商品を追加していくと、タイトルの下にカスタムフィールドの値も表示されるようにするにはどうしたらいいでしょうか。
Custom Post Type UIはカスタム投稿タイプを用意するプラグインですが、表示をさせたいアーカイブ情報が表示されるページに正常にアクセスできていますでしょうか?
Show Current Templatesなどを活用して、まずは意図したアーカイブページが表示されているか、そこに読み込まれているテンプレートなどから確認してみてください。
以上、ご確認ください。
♥ 0いいねをした人: 居ません上部のマージンについては
.hoge-custom-block
についているのですが、詳細度の問題で、ここに記述しても反映されません。ですので、.p-entry-content .hoge-custom-block
にmargin-top: 0;
とか書いてみると良いかもしれません。下部のマージンについては、各項目についているので、どこに
margin-bottom: 0;
を記述したら良いか探してみましょう。スクリーンキャプチャを拝見したところ、Google Chromeを使われていると思うので、開発者ツールを活用してどんなCSSクラスにどんなスタイルがついているのかを探索してみると、より学習が深まると思います。
♥ 1いいねをした人: 居ません追加CSSなどから
.wp-oembed-blog-card__title
に スタイルを適応すると変更可能かと思います。例えば、フォントサイズと行間を変更したいのであれば、
.wp-oembed-blog-card__title { font-size: 14px; line-height: 1.2; }
と言った形で記述すると変更できるかと思います。値はサンプルですので、適宜確認しながら最適な数値でお試しください。
♥ 2いいねをした人: 居ませんおそらくSnow Monkeyでサイト模写をして学習をされているのかな?と思いましたので、まずはヒントを書いてみます。
該当ブロックの親に任意のCSSクラスを設定した上で、(下では
hoge-custom-block
とします)
.hoge-custom-block .c-row--margin>.c-row__col
のpadding-left
やpadding-right
を良しなにしてあげると変更することができます。しかし、スマホなどで表示した際にどうしたいのかにもよるので、その場合にはメディアクエリで切り替えてあげてください。
♥ 1いいねをした人: 居ませんこちらの環境で確認してみたとこと、そう言った現象は発生しませんでした。
スライダーブロックに画像を複数枚アップロードして更新をかけると、5枚アップロードしたのに1枚しかアップロードされてない。3枚アップロードしたのに1枚しかアップロードされていない。
このような現象はサーバー側や通信環境などが要因でも発生しうるので、もしかしたらテーマやブロックが原因ではないかもしれません。
もう少し詳しくお聞かせいただけると、何がお伝えできることが増えるかもしれません。
ご確認をお願い致します。
♥ 1いいねをした人: 居ません -
投稿者投稿