Easy Digital Downloads (EDD) では、[downloads] ショートコードは、すべての製品を 1 ページに出力するための標準的な方法です。ショートコードとその機能に慣れていない場合は、こちらで確認できます。
デフォルトでは、製品は 3 列のグリッドレイアウトで表示され、9 つの製品が表示されます。ストアに 9 つ以上の製品がある場合は、ページネーションが表示されます。ほとんどのテーマでは、この表示はテーマ自体の追加の CSS (デザインスタイル) なしで十分に機能します。ただし、すべてのテーマで希望どおりに表示されない場合があります。さらに悪いことに、小さい画面では表示が歪む可能性があります。
これは通常、「[downloads] ショートコードはレスポンシブですか？」という疑問につながります。つまり、人々は、小さい画面で表示がそれほど良く見えない理由をよく疑問に思います。その理由と、それに対処する方法を以下に説明します。
[downloads] ショートコードはなぜレスポンシブではないのですか？
最初に注意すべき点は、レスポンシブは すべてに当てはまる タイプのものではないということです。要素のレスポンシブは、それが含まれる環境に完全に依存します。
たとえば、サイトの一部に、テキストが充填された 2 つの並列列があり、どちらもメインコンテンツ領域の幅の 50% を占めているとします。また、それらのツイン列を「保持」しているメインコンテンツ領域の幅が 1000px であるとします。つまり、各列の幅は 500px です。小さいデバイスで画面幅が狭くなるにつれて、コンテンツ領域の幅が約 600px になると、幅 300px の列が少しスリムになりすぎます。これは望ましくないため、レスポンシブ CSS は、「画面幅が 600px になったら、これらの 2 つの列の幅を 50% から 100% に変更し、左の列を右の列の上にスタックする」というルールを使用します。これにより、両方の列が再び読みやすくなります。
それは まさに レスポンシブ CSS が機能する方法であり、意図的に行われています。
それを理解すると、それらのツイン列を画面幅に「応答」させるためのレスポンシブ CSS を記述するには、列の周りの要素の寸法を知る必要があることが明らかになります。WordPress のコンテキストでは、それはあなたのテーマのデザインと寸法を知る必要があることを意味します。
もちろん、お客様が使用する可能性のあるすべてのテーマの詳細を知ることはできません。お客様のテーマが [downloads] ショートコードを幅 500px の要素に出力するかもしれませんが、次のお客様のテーマは同じショートコードを幅 900px の要素に出力する可能性があります。お客様のレスポンシブ CSS は、他のお客様のレスポンシブ CSS とは大きく異なる必要があります。テーマを切り替えると、レスポンシブ CSS を再度変更する必要があります。
言い換えれば、すべてのテーマに対して [downloads] ショートコードがいつ、どのように応答すべきかを予測することはできません。
[downloads] ショートコード用のレスポンシブ CSS を含むテーマはありますか？
はい、その通りです！EDDを活用するように構築されたほとんどのテーマでは、これはすでに完了しています。たとえば、Venddテーマは、すべての画面サイズに対して[downloads]ショートコードの出力を完全に設計しています。デモはこちらで確認できます：https://easydigitaldownloads.com/vendd/ Venddは[downloads]ショートコードをレスポンシブにするだけでなく、レイアウトも強化しています。
テーマがEDDを考慮して強化されていない場合、ショートコードの出力はレスポンシブになりません。ショートコードパラメータで指定されたとおりに表示され、それ以上のものはありません。画面サイズに「応答」させたい場合は、テーマの観点から具体的に記述する必要があります。
また、EDDで強化されている一部のテーマでも、[downloads]ショートコードがレスポンシブにならない場合があることに注意してください。代わりに、製品を表示するための独自のテンプレートが含まれており、ショートコードの代わりにカスタムテンプレートを使用することをお勧めします。
こちらでEDD対応のテーマを多数取り揃えています：https://easydigitaldownloads.com/themes/
EDD対応のテーマを使用していない場合はどうすればよいですか？
EDDで強化されていないテーマを引き続き使用したいが、[downloads]ショートコードの出力もレスポンシブにしたい場合は、次の2つのオプションがあります。
1. CSS作成者であれば、レスポンシブCSSを記述するだけで、テーマからショートコードの出力が意図したとおりに動作するようにできます。EDDがCSSを壊すような変更を行うことを心配する必要はありません。
2. デザイナーに依頼して、出力をレスポンシブにしてもらいます。これは非常に難しいタスクではないため、デザイナーはEDD自体に精通している必要はありません。レスポンシブCSSは広く理解されているデザインスタイルであり、ほとんどのCSS作成者は出力を表示してテーマに合わせてレスポンシブにすることができます。EDDエコシステムにすでに精通している専門家を利用したい場合は、信頼できるパートナーであるCodeableをお勧めします。
