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

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

エレガント Themesで公開されている以下のコードを適用すると、次の図のようにアーカイブページがポートフォリオスタイル（Masonryスタイル）で表示されます。

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

次のコードを 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テーマツアー