• enpekoubou

    (@enpekoubou)


    投稿の回り込みについての質問になります。

    投稿作成時は画像に文書の回り込みができていて「プレビュー」でも回り込みした状態で表示されるのですが、「投稿を表示」及び実際にあがったものを確認すると回り込みができておらず縦並びになります。

    この原因は、投稿作成時及びプレビューでは、load-styles.php?というのが効いていて回り込みになっているようなのですが、「投稿を表示」及び実際にあがったものではload-styles.php?が存在していないためではないかと推測しています。
    (phpなのでhtml変換されるとしても、回り込みのalignrightクラスがデベロッパーツールで検索しても存在していません。)

    なぜこのようなことになるのか、知見のある方ご教授いただけませんでしょうか?

    WORDPRESSのテーマは自作のものを使用しています。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • nobita

    (@nobita)

    こんにちは、

    load-styles.php は、管理画面用のスタイルなので、フロントエンドでは通常ロードされません。

    WORDPRESSのテーマは自作のものを使用しています。

    現在テーマは、phpテンプレートを使用するクラッシックテーマと、HTMLテンプレートを使用するブロックテーマの2種類があります。

    自作されているテーマがブロックテーマかクラッシックかによって、回り込みようのCSSが適用されるか、されないか異なります。

    ブロックテーマなら、ブロックのCSSはコアが設定してくれますが、
    クラッシックテーマの場合は、コアがセットしてくれるのは、alignleft,alignright,aligncenter(editorによっては、alignwide,alignfullもセットされます)等のクラス名までです

    クラッシックの場合は、テーマがこれらのクラスに対してスタイルを設定する必要があります。(wordpress.orgのクラッシックテーマはこのルールが適用されます。)

    • この返信は10ヶ月前にnobitaが編集しました。
    トピック投稿者 enpekoubou

    (@enpekoubou)

    お世話になります。
    回答ありがとうございます。

    書いていただいていることは概ね理解できました。
    つまり、クラシックを使用している場合、自分でCSSを書く必要があるという認識でいいでしょうか?

    いただいた回答の中で「自作されているテーマがブロックテーマかクラッシックか」という部分がありましたが、どのようにそれは選択できるのでしょうか?

    重ね重ねすいません。
    回答いただけると大変助かります。

    自作のサイトのリンク貼っておきます。(「えんぺ工房」といいます。)
    https://enpekoubou.com/
    問題となっている投稿は、
    (投稿にすると全て質問した状況になってしまうのですが)
    https://enpekoubou.com/huct/
    です。

    引き続きよろしくお願いします。


    nobita

    (@nobita)

    いただいた回答の中で「自作されているテーマがブロックテーマかクラッシックか」という部分がありましたが、どのようにそれは選択できるのでしょうか?

    ブロックテーマとクラッシックテーマは互換性がありませんので、切り替えは、フィルターや設定項目から切り替えることはできません。

    ご連絡いただいたサイトは、index.php, single.php等のPHPテンプレートにテンプレートタグを記述するやり方で構築されていると推察できます(つまり、クラッシックテーマ)

    ブロックテーマは、テーマ内のtemplatesホルダー内のindex.html,single.html.(テンプレート階層のファイルタイプが、htmlに変更されたファイル名が使用されます)

    テーマそのものが異なる形で構築されるので、ブロックテーマの場合は、
    クラッシックテンプレートで使用していたテンプレートタグや、コンディショナルタグは使用できなくなり、ブロックタグ(?)で記述することになります。

    回り込みができない件

    ソースから見ると、だいぶ古いバージョンのWordPressのようですね。

    wp-block-image には、display:inline; width:fit-content;

    等に設定して、

    alignrightには、float:right;

    を指定すると、右によると思います。

    余談

    ウェブサイトを拝見して、

    <!-- PCナビ/////////////////////////////////// -->

    topへのリンクが、htmlになっているようですが、リンクなどは、ブロックテーマでも特にHTMLに変更する必要はありません。

    トピック投稿者 enpekoubou

    (@enpekoubou)

    返信が遅くなりすいません。
    メールの送信エラーが起きていました。

    回答いただき大変助かります。
    クラシック、ブロックという観点でテーマをデフォルトのテーマ「twentytwenty…」に切り替えると同じ投稿で回り込みがききました。
    CSSを組むことはできるのですが、「なぜ」WORDPRESS上で効かなくなるのか気持ち悪いなと思っていました。
    回答いただいた内容を自分用にまとめると、
    『クラッシックテーマとブロックテーマは互換性がない。
    index.php, single.php等のPHPテンプレートにテンプレートタグを記述するやり方はクラッシックテーマとなる。
    クラシックテーマで作成したものはブロックテーマのブロックタグ(?)が使用できない。』

    『また、私のindex.php, single.php等のPHPテンプレートにテンプレートタグを記述するやり方は古く、今はtemplatesホルダー内にindex.html,single.htmlを書く方法に変わっており、上記の内容の繰り返しになりますが、この方法で書かないとブロックタグ(?)が有効ににならない。』と認識しました。

    回答でご指摘のあった「古いバージョンのWordPress」といった内容については、WORDPRESS6.4.3を使用していますので、古いのは参考にした教材なのかな、と思っています。

    また、「topへのリンクが、htmlになっている」といった内容については、たしかに、そのようになっていました。
    「ブロックテーマでも特にHTMLに変更する必要はありません。」と書いていただいていたので、やっぱり参考にした教材が古いのかもしれません。

    詳細に教えていただき、大変感謝しています。重ね重ねありがとうございました。

    もし上記の内容で私が間違った解釈している点がありましたら、ご指摘いただけると大変助かります。
    お手数をおかけしますが、何卒よろしくお願いします。

    丁寧なお返事をいただきありがとうございます。

    一点だけ、訂正がありました。

    クラシックテーマで作成したものはブロックテーマのブロックタグ(?)が使用できない。

    クラッシックテーマのindex.php等に、ブロックタグを記述する事はできます。ただ、一般的には解説されている例は少なそうなので、クラッシックテーマを使って、ブロックタグを書きたいと将来的に思った時のために、ちょっとだけ紹介しておきますので、どっか片隅に、、、

    以下は、ブロックパターンの例ですが、

    echo do_blocks('<!-- wp:pattern {"slug":"emulsion/primary-menu"} /-->');
    トピック投稿者 enpekoubou

    (@enpekoubou)

    こちらこそ丁寧な返信ありがとうございます。

    以下、質問を重ねてしまい大変恐縮なのですが、
    回答いただいた内容はindex.phpにだけ適用できる内容なのでしょうか?
    (このコードを挿入することで、index.phpでブロックタグ(?)を使用できると解釈したのですが)
    たとえば、他の固定ページや投稿で使用できればいいな、と思いました。

    あと、前回の回答を拝見し、ブロックテーマでオリジナルテーマを作成する方法に学習したいと思い、書籍等もさがしましたが、あまりなく、YOUTUBEの動画で見ることぐらいしかできませんでした。
    (私が昨年学習した通信制のWeb系のスクールでもブロックテーマのオリジナルテーマについては全く触れていませんでした。いまでもクラシックテーマのオリジナルテーマだけを教えていると思います。)

    さしいった質問になってしまいますが、nobitaさんはどのようにしてブロックテーマについて学習されましたか?
    もし可能でしたらおすすめの書籍、サイト等あれば教えていただきたいのですが

    質問だらけになってしまいました。
    お手すきな時、回答いただけると大変助かります。

    追伸、前回、メールの送信エラーが2回ほど発生し、返信が大変遅れてしまいました。(ここのサイトは1回送信エラーが発生すると、22時間後に自動送信を待つ必要があるようです。)申し訳ありません。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「回り込みができない」には新たに返信することはできません。