ベストセラー人気 WordPress テーマTop 30 詳細

Diviアーカイブページのレイアウトをポートフォリオスタイルで表示する方法

Last Updated:2020年11月14日| 6のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

Diviアーカイブページのレイアウトをポートフォリオスタイルで表示する方法4

Elegant ThemesのDiviテーマブログモジュールは、基本的に全体の幅とグリッドに表示することができるオプションを提供していますが、ブログのページ、タグ、カテゴリーなどの保管物(アーカイブ)は、上記の図のようなスタイルで表示されます。

Elegant Themesで公開した以下のコードを適用すると、次の図のように保管物のページがポートフォリオスタイル(Masonryスタイル)で表示されます。

Diviアーカイブページのレイアウトをポートフォリオスタイルで表示する方法5

保管物(アーカイブ)ページには、カテゴリー、タグだけでなく、検索結果保管物のページ、投稿者保管物のページなども含まれます。 以下のコードは、すべての保管物のページに影響を及ぼします。

次のコードを WordPress 伝言板で Divi> Theme Options> General タブの下部にある カスタムCSS セクションに追加します。 または、子テーマ(チャイルドテーマ)を作成し、子テーマのstyle.cssに追加してもされます。

/*
* Remove sidebar on all archive pages; 모든 아카이브 페이지에서 사이드바 제거하기
*/
.search #main-content .container::before,
.archive #main-content .container::before {
display: none;
}
.search #left-area,
.archive #left-area {
width: 100%;
float: none;
padding-right: 0;
}
.search #sidebar,
.archive #sidebar {
display: none;
}

/*
* Create Mansonry styles for archive pages; 아카이브 페이지용 Masonry 스타일 생성
*/
.search #left-area,
.archive #left-area {
-moz-column-count: 3;
column-count: 3;
-moz-column-gap: 60px;
column-gap: 60px;
}

.archive .et_pb_post > a,
.search .et_pb_post > a {
margin: -20px -20px 10px;
display: block;
}

.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
overflow: hidden; /* fix for Firefox */
page-break-inside: avoid;
break-inside: avoid-column;
width: 100%;
padding: 19px;
border: 1px solid #d8d8d8;
background-color: #fff;
word-wrap: break-word;
display: inline-block;
}

.search #left-area .et_pb_post h2,
.archive #left-area .et_pb_post h2 {
font-size: 18px;
}

.search #left-area .et_pb_post.format-link,
.search #left-area .et_pb_post.format-quote,
.search #left-area .et_pb_post.format-audio,
.archive #left-area .et_pb_post.format-link,
.archive #left-area .et_pb_post.format-quote,
.archive #left-area .et_pb_post.format-audio{
padding: 0;
}

.archive .et_pb_post .et_pb_image_container,
.archive .et_pb_post .et_main_video_container,
.archive .et_pb_post .et_audio_content,
.archive .et_pb_post .et_pb_slider,
.search .et_pb_post .et_pb_image_container,
.search .et_pb_post .et_main_video_container,
.search .et_pb_post .et_audio_content,
.search .et_pb_post .et_pb_slider {
margin: -20px -20px 10px;
}

.archive .et_pb_post.format-audio .et_audio_content{
margin: 0px -38px 0px;
}

.archive .et_pb_post .et_pb_slider .et_pb_slide,
.search .et_pb_post .et_pb_slider .et_pb_slide {
min-height: 180px;
}

.archive .pagination,
.search .pagination {
padding: 20px 0;
}

/*
* Media Queries; メディア 쿼리
*/
@media screen and (max-width: 980px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 60px;
column-gap: 60px;
}
}
@media screen and (max-width: 767px) {
.search #left-area,
.archive #left-area {
-moz-column-count: 1;
column-count: 1;
}
.search .et_pb_post.format-audio .et_audio_content,
.archive .et_pb_post.format-audio .et_audio_content{
margin: 0;
}
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
.search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,
.archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{
min-width: 300px!important;
width: 300px!important;
}
}

上記のコードで 「Remove sidebar on all archive pages " 部分はそのまま維持してもよく、削除できます。 アーカイブのページでもサイドバーを表示したい場合 「Remove sidebar on all archive pages " 部分を削除して、サイドバーをなくしたい保持します。

保管物ページこの一番下にデフォルトで表示されるページネーション(「older entries "、" newer entries」)の代わりにページ番号を表示するには、 WP-Pagenavi プラグインをインストールすると、お勧めします。 現在、このブログにWP-Pagenaviがインストールされています。

次に、ページネーションリンクの位置を正す牛海绵下のJavaScriptコードを Divi> Theme Options> Integration> Add code to the <head> of your blogに追加するようにします。

<script>
(function($) {
$(document).ready(function() {
leftarea = $('#left-area');
pageNavi = leftarea.find('.wp-pagenavi');
pageNavigation = leftarea.find('.pagination');

if ( pageNavi.length ) {
pagenav = $('#left-area .wp-pagenavi');
}
else {
pagenav = $('#left-area .pagination');
}
pagenav.detach();
leftarea.after(pagenav);
});
})(jQuery)
</script>

WP-Pagenaviプラグインをインストールする場合は、CSSを使用して適切にレイアウトを必要に応じて修正してくれるようです。

Diviアーカイブページのレイアウトをポートフォリオスタイルで表示する方法6

メモ:



6のコメント

コメント

  1. 良い情報を共有していただきありがとうございます。 現在のホームページを作る中です。
    上記のコードを適用した後ExplorerとFirefoxでハンヨルに3の記事が見え、クロムでは2の投稿のみを表示しています。 この場合、どの部分を確認しなければならでしょうか?
    下のリンクです。
    https://jirisanweb.net/category/culture/

    応答
    • こんにちは?

      display:flex;を追加してみると、クロムでも正常に動作するようです。

      次のstackoverflow記事を参照してみていただけますか?

      https://stackoverflow.com/questions/41985733/column-count-is-not-working-in-chrome

      それでも問題が解決しない場合 エレガントなテーマに支援を要請してみることができます。

      応答
    • うーん...この問題を次の記事でも扱っていますね。

      https://www.reddit.com/r/css/comments/a1qa0d/strange_columncount_bug_in_chrome_7003538110/

      Chromeでテストしてみると本文のコードでdisplay:inline-block; 部分をdisplay:block;に変更したら解決なりますね。
      一度テストしてみてください?

      応答
  2. ポストの高さがピンターレストのような他のです、高さがすべて同じ作ることができる方法があるでしょう?

    応答
    • こんにちは?

      https://www.thewordcracker.com/basic/divi-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8-%EB%AA%A8%EB%93%88-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0/ 記事で紹介するPortfolio Posts Proのようなプラグインを使用すると、簡単そうです。

      他の方法でブログモジュールを追加して、cssクラスを指定し、CSSでmax-heightの値を指定することができます。 この方法は、インターネットで主に紹介されている方法です。

      別の方法としては、次の記事で紹介するjQueryを活用する方法もあります。

      https://www.thewordcracker.com/jquery-examples/make-the-heights-of-div-identical-using-jquery/

      https://www.thewordcracker.com/jquery-examples/make-the-heights-of-div-identical-using-jquery-ii/

      CSSを指定する方法は、ブログモジュールにクラス(例えば、custom_blog)を指定するようにして、次のようなコードをCustom CSSに追加します。

      @media only screen and (min-width: 768px) {
      .custom_blog .et_pb_post {
      min-height: 580px;
      max-height:580px;
      }
      }

      応答