https://gist.github.com/Hansanghyeon/2b441b8b91a07b97869c44c51972c567
Table style
<table />
<?php
if (!empty($postType = get_post_type())) {
add_action('pre_get_posts', function ($query) {
if (
!is_admin()
&& $query->is_post_type_archive(get_post_type())
&& $query->is_main_query()
) {
$query->set('posts_per_page', -1);
}
});
// Define page_id
$page_ID = get_the_ID();
// Define paginated posts
$page = get_query_var('page');
// Define custom query parameters
$args = array(
'post_type' => $postType, // post types
'posts_per_page' => 10,
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
);
// If is_front_page "paged" parameters as $page number
if (is_front_page())
$args['paged'] = $page;
// Instantiate custom query
$custom_query = new WP_Query($args);
// Custom loop
if ($custom_query->have_posts()) :
$renderTable = <<<HTML
<table>
<colgroup>
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<thead>
<th>제목</th>
<th>등록일</th>
</thead>
<tbody>
HTML;
while ($custom_query->have_posts()) :
$custom_query->the_post();
/**
* Displaying content
*
* the_title(), the_permalink(), the_content() etc
* Or see Twentysixteen theme page.php
* get_template_part( 'template-parts/content', 'page' );
*
*/
$_title = get_the_title();
$_permalink = get_the_permalink();
$_date = get_the_date('Y-m-d');
$renderTable .= <<<HTML
<tr>
<td class="title">
<a href="$_permalink">$_title</a>
</td>
<td class="date">$_date</td>
</tr>
HTML;
endwhile;
$renderTable .= <<<HTML
</tbody>
</table>
HTML;
echo $renderTable;
/**
* Pagination parameters of the_posts_pagination() since: 4.1.0
*
* @see the_posts_pagination
* https://codex.wordpress.org/Function_Reference/the_posts_pagination
*
*/
$arrow = <<<HTML
<div class="arrow"></div>
HTML;
$pagination_args = array(
'mid_size' => 5,
'prev_text' => __($arrow, 'theme-domain'),
'next_text' => __($arrow, 'theme-domain'),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('', 'theme-domain') . ' </span>',
'screen_reader_text' => __('screen-reader-text')
);
/**
* Fix pagination link base
*
* If in paginated posts w/o multiple loop
*
*/
if (!is_front_page() && 0 < intval($page))
$pagination_args['base'] = user_trailingslashit(
untrailingslashit(get_page_link($page_ID)) . '/page/%#%'
);
/**
* Fix Pagination with $GLOBALS['wp_query'] = {custom_query}
*
* @see get_the_posts_pagination use $GLOBALS['wp_query']
* https://developer.wordpress.org/reference/functions/get_the_posts_pagination/#source-code
*
*/
$GLOBALS['wp_query'] = $custom_query;
echo <<<HTML
<div class="paginationWrap">
<style>
.paginationWrap {
display: flex;
}
.paginationWrap .nav-links {
display: flex;
align-items: center;
}
.paginationWrap .nav-links > *:not(:last-child, .prev, .next) {
padding: 6px;
}
.paginationWrap .prev {
margin-right: 26px;
}
.paginationWrap .next {
margin-left: 26px;
}
.paginationWrap .prev .arrow {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.296' height='38.296' viewBox='0 0 38.296 38.296'%3E%3Cg fill='none' stroke='%23999'%3E%3Ccircle cx='19.148' cy='19.148' r='19.148' stroke='none'/%3E%3Ccircle cx='19.148' cy='19.148' r='18.648'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23999' stroke-width='2px' d='M1381.182 7160.768l-5.135 5.5 5.135 6.025' transform='translate(-1359.815 -7147.566)'/%3E%3C/svg%3E%0A");
}
.paginationWrap .prev .arrow {
transform: rotate(180deg);
}
.paginationWrap .arrow {
font-size: 0;
width: 39px;
height: 39px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.296' height='38.296' viewBox='0 0 38.296 38.296'%3E%3Cg fill='none' stroke='%23999'%3E%3Cg transform='translate(.46) translate(-.46)'%3E%3Ccircle cx='19.148' cy='19.148' r='19.148' stroke='none'/%3E%3Ccircle cx='19.148' cy='19.148' r='18.648'/%3E%3C/g%3E%3Cpath stroke-width='2px' d='M1376.048 7160.768l5.135 5.5-5.135 6.025' transform='translate(.46) translate(-1358.579 -7147.566)'/%3E%3C/g%3E%3C/svg%3E%0A");
background-position: center;
background-repeat: no-repeat;
}
</style>
HTML;
$nav = get_the_posts_pagination($pagination_args);
$nav = str_replace('<h2 class="screen-reader-text">screen-reader-text</h2>', '', $nav);
if ($paged === 1 && !empty($nav)) {
echo <<<HTML
<div class="prev">
<div class="arrow disable"></div>
</div>
HTML;
}
echo $nav;
$endPage = $wp_query->max_num_pages;
if ($paged === $endPage) {
echo <<<HTML
<div class="next">
<div class="arrow disable"></div>
</div>
HTML;
}
echo "</div>";
else :
/**
* Empty Post
*
* Run your stuff here if posts empty
* Or see Twentysixteen theme page.php
* get_template_part( 'template-parts/content', 'none' );
*/
endif;
wp_reset_query(); // Restore the $wp_query and global post data to the original main query.
}Code language: HTML, XML (xml)<div /> bootstrap layout
<div class="tableWrap">
<?php
if (!empty($postType = get_post_type())) {
add_action('pre_get_posts', function ($query) {
if (
!is_admin()
&& $query->is_post_type_archive(get_post_type())
&& $query->is_main_query()
) {
$query->set('posts_per_page', -1);
}
});
// Define page_id
$page_ID = get_the_ID();
// Define paginated posts
$page = get_query_var('page');
// Define custom query parameters
$args = array(
'post_type' => $postType, // post types
'posts_per_page' => 3,
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
);
// If is_front_page "paged" parameters as $page number
if (is_front_page())
$args['paged'] = $page;
// Instantiate custom query
$custom_query = new WP_Query($args);
// Custom loop
if ($custom_query->have_posts()) :
$renderTable = <<<HTML
<div class="row">
<div class="col-10">제목</div>
<div class="col-2">등록일</div>
</div>
<div class="body">
HTML;
while ($custom_query->have_posts()) :
$custom_query->the_post();
/**
* Displaying content
*
* the_title(), the_permalink(), the_content() etc
* Or see Twentysixteen theme page.php
* get_template_part( 'template-parts/content', 'page' );
*
*/
$_title = get_the_title();
$_permalink = get_the_permalink();
$_date = get_the_date('Y-m-d');
$renderTable .= <<<HTML
<div class="row">
<div class="col-10 title">
<a href="$_permalink">$_title</a>
</div>
<div class="col-2">$_date</div>
</div>
HTML;
endwhile;
$renderTable .= <<<HTML
</div>
HTML;
echo $renderTable;
/**
* Pagination parameters of the_posts_pagination() since: 4.1.0
*
* @see the_posts_pagination
* https://codex.wordpress.org/Function_Reference/the_posts_pagination
*
*/
$arrow = <<<HTML
<div class="arrow"></div>
HTML;
$pagination_args = array(
'mid_size' => 5,
'prev_text' => __($arrow, 'theme-domain'),
'next_text' => __($arrow, 'theme-domain'),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('', 'theme-domain') . ' </span>',
'screen_reader_text' => __('screen-reader-text')
);
/**
* Fix pagination link base
*
* If in paginated posts w/o multiple loop
*
*/
if (!is_front_page() && 0 < intval($page))
$pagination_args['base'] = user_trailingslashit(
untrailingslashit(get_page_link($page_ID)) . '/page/%#%'
);
/**
* Fix Pagination with $GLOBALS['wp_query'] = {custom_query}
*
* @see get_the_posts_pagination use $GLOBALS['wp_query']
* https://developer.wordpress.org/reference/functions/get_the_posts_pagination/#source-code
*
*/
$GLOBALS['wp_query'] = $custom_query;
echo <<<HTML
<div class="paginationWrap">
<style>
.paginationWrap {
display: flex;
}
.paginationWrap .nav-links {
display: flex;
align-items: center;
}
.paginationWrap .nav-links > *:not(:last-child, .prev, .next) {
padding: 6px;
}
.paginationWrap .prev {
margin-right: 26px;
}
.paginationWrap .next {
margin-left: 26px;
}
.paginationWrap .prev .arrow {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.296' height='38.296' viewBox='0 0 38.296 38.296'%3E%3Cg fill='none' stroke='%23999'%3E%3Ccircle cx='19.148' cy='19.148' r='19.148' stroke='none'/%3E%3Ccircle cx='19.148' cy='19.148' r='18.648'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23999' stroke-width='2px' d='M1381.182 7160.768l-5.135 5.5 5.135 6.025' transform='translate(-1359.815 -7147.566)'/%3E%3C/svg%3E%0A");
}
.paginationWrap .prev .arrow {
transform: rotate(180deg);
}
.paginationWrap .arrow {
font-size: 0;
width: 39px;
height: 39px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.296' height='38.296' viewBox='0 0 38.296 38.296'%3E%3Cg fill='none' stroke='%23999'%3E%3Cg transform='translate(.46) translate(-.46)'%3E%3Ccircle cx='19.148' cy='19.148' r='19.148' stroke='none'/%3E%3Ccircle cx='19.148' cy='19.148' r='18.648'/%3E%3C/g%3E%3Cpath stroke-width='2px' d='M1376.048 7160.768l5.135 5.5-5.135 6.025' transform='translate(.46) translate(-1358.579 -7147.566)'/%3E%3C/g%3E%3C/svg%3E%0A");
background-position: center;
background-repeat: no-repeat;
}
</style>
HTML;
$nav = get_the_posts_pagination($pagination_args);
$nav = str_replace('<h2 class="screen-reader-text">screen-reader-text</h2>', '', $nav);
if ($paged === 1 && !empty($nav)) {
echo <<<HTML
<div class="prev">
<div class="arrow disable"></div>
</div>
HTML;
}
echo $nav;
$endPage = $wp_query->max_num_pages;
if ($paged === $endPage) {
echo <<<HTML
<div class="next">
<div class="arrow disable"></div>
</div>
HTML;
}
echo "</div>";
else :
/**
* Empty Post
*
* Run your stuff here if posts empty
* Or see Twentysixteen theme page.php
* get_template_part( 'template-parts/content', 'none' );
*/
endif;
wp_reset_query(); // Restore the $wp_query and global post data to the original main query.
}
?>
</div>Code language: HTML, XML (xml)CHANGELOG
2021-02-07
Added
맨 첫 페이지버튼, 마지막 페이지 버튼 예외처리로 추가
첫 번째 페이지 일때는 disable 클래스를 부여