ワードプレス：どのように石積みのレイアウトにギャラリーショートコードをスタイルするには？

Question

私は（ページのコンテンツセクションでこれを置く）を使用して可能な石工のレイアウトを作成しようとしている：

[gallery size="large" link="file" columns="4" ids="1,2,3"]

ドキュメント：https://codex.wordpress.org/Gallery_Shortcode

しかし、これは望ましい効果であるにもかかわらず：

これが起こって続けるものです：

基本的に

、いくつかのCSSまたはこれを行うには、ギャラリーを変換するために追加することができたとしてもジャバスクリプトがあった場合には、素晴らしいでしょう。現時点では

私のコード、次のようになります。

<div class="gallery-template"> 
    the_content(); 
</div> 

そして、私の追加のCSSは次のとおりです。

.gallery-template img{ 
    max-width: 100%; 
    height: auto; 
    border: none !important; 
} 
.gallery-item{ 
    width: 33% !important; 
    margin: 0; 
    margin-top: 0 !important; 
} 

これはまさに新しいセクションの問題を解決するために何もしません「行」の間にpaddingとmarginを取り除くために、3分の1の開始点があります。

上記[gallery]ショートがレンダリングされるとき、それはDOMでレンダリングの道はそうのようなものです：

<div class="gallery-template"> 
    <div id="gallery-1" class="gallery"> 
     <dl class="gallery-item">...</div> 
     <dl class="gallery-item">...</div> 
     <dl class="gallery-item">...</div> 

     // And so on.. 
    </div> 
</div> 

そして、DOMにレンダリングされたCSSは次のとおりです。誰もが

#gallery-1 { 
    margin: auto; 
} 
#gallery-1 .gallery-item { 
    float: left; 
    text-align: center; 
} 
.gallery-item { 
    width: 33% !important; 
    margin: 0; 
    margin-top: 0 !important; 
} 

実装していますこの種の障害の解決策はまだありますか？

また、私は外部プラグインの使用を控えようとしています。

Answer 1

OK！私はこれを得ることができました。私の解決策は次のとおりです。

最初にギャラリーショートコードにページに外部スタイルを挿入することを禁止する必要がありました。だから、funtions.phpファイルで、私が追加：

[gallery size="large" link="file" ids="1,2,3"] 

むしろより：

add_filter('use_default_gallery_style', '__return_false'); 

次に、私はそうのように、私はページ内に組み込むたショートタグ内の列指定を取り出しました

[gallery size="large" link="file" columns="4" ids="1,2,3"] 

最後に、私は（を含め、私のページにこのCSSを置い）：

EXTRA

.gallery-template{margin:auto; column-count:4;column-gap:0;} 
.gallery-template img{max-width:100%;height:auto;border:none !important;} 
.gallery-item{margin:0;display:inline-block;width:100%;width:100%;margin-top:0;} 

：あなたはこれが応答するために探している場合は、単にそのように、列の新しい番号に@mediaあなたがお好みのブレークポイントをしたいタグ、場所を追加します。

@media screen and (max-width:1200px) { 
    .gallery-template{column-count:3;} 
} 

@media screen and (max-width:772px) { 
    .gallery-template{column-count:2;} 
} 

Answer 2

これは確かにCSSの質問です。私はflexboxをチェックアウトすることをお勧めします。あなたがあなたのHTMLを投稿していないので、ソリューション全体を作成するのはややこしいでしょう。このコードがうまくいかない場合は、あなたの投稿を編集してその一部を含めてみてください。

#gallery-1 { 
    display: flex; 
    flex-direction: column; 
} 

.gallery-item { 
    flex: 0 1 33%; 
    margin: 0; 
    margin-top: 0 !important; 
}