Title: Responsive Pagination Author: Bagus Sasikirono Published: 2020 年 5 月 20 日 Last modified: 2021 年 7 月 23 日 --- 搜尋外掛 ![](https://ps.w.org/responsive-pagination/assets/banner-772x250.png?rev=2344847) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/responsive-pagination/assets/icon.svg?rev=2308650) # Responsive Pagination 由 [Bagus Sasikirono](https://profiles.wordpress.org/sasikirono/) 開發 [下載](https://downloads.wordpress.org/plugin/responsive-pagination.1.4.1.zip) * [詳細資料](https://tw.wordpress.org/plugins/responsive-pagination/#description) * [使用者評論](https://tw.wordpress.org/plugins/responsive-pagination/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/responsive-pagination/#installation) * [開發資訊](https://tw.wordpress.org/plugins/responsive-pagination/#developers) [技術支援](https://wordpress.org/support/plugin/responsive-pagination/) ## 外掛說明 Responsive Pagination plugin lets you configure your paginations to adapt to different screen size. Your paginations can be shown differently based on browser width as in responsive web design concept. For instance, you might want to have a longer pagination with many page numbers when your site visitors are using desktops and large screens, but need shorter pagination with only _Prev_ and _Next_ link when they’re using phones. You may try using this plugin when you found your theme is not doing well with the responsive design on its pagination. This plugin lets you configure manually to the desired breakpoints. ### Two Different Methods to Apply Responsive Pagination You can choose the way you want to apply responsive pagination. #### Method A : Convert Existing Paginations (No Coding Required) This method will convert the existing paginations from your theme into responsive paginations without needs to add any WordPress shortcode or PHP code. You only need to fill the selectors (_CSS_ or _jQuery_-like selector) of the existing pagination elements. You’ll input the selectors in Admin Settings Page (_Settings > Responsive Pagination_) #### Method B : Create new Pagination Programmatically from Scratch This method will need you to insert PHP code into template files directly using _Responsive Pagination API_. This method supports queries using _WP\_Query_, or even something more generic without _WP\_Query_. ### Responsive Pagination API (For Programmatic Usage) _Note : This API section is a short guide for creating responsive pagination programmatically. However, there is easier solution using this plugin without touching any code – that is by converting your theme’s existing pagination from within Admin Settings Page with just providing its CSS/jQuery selector._ If you want to create responsive pagination programmatically, this plugin adds new function for you to use, which will render a new pagination where you put the function. ``` ``` Parameters : * `$id`: _(string)_ _(required)_ ID for the new pagination you want to create in _kebab-case_ format. * `$args` : _(WP\_Query | array)_ _(required)_ [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/) instance, or an associative array contains : - `$current` : _(int)_ Current page - `$total`: _(int)_ Total pages - `$urlFirstPage` : _(string)_ URL for first page - `$urlPattern`: _(string)_ URL pattern for this pagination by using `{pagenum}` tag. Note : Pagination settings and Breakpoint Configurations are still configured from within Admin Settings Page. #### Example (For Programmatic Usage) Example for creating pagination for posts within main loop using _WP\_Query_. This also works with custom post type as long as you have _WP\_Query_ within loop. ``` ``` Example for creating a more generic pagination by providing your own data for current page, total pages, URL first page, and URL pattern without _WP\_Query_. ``` $my_current_page, // your current page here 'total' => $my_total_pages, // your total page here 'url_first_page' => 'https://www.example.com/archives/', // URL when current page = 1 'url_pattern' => 'https://www.example.com/archives/page/{pagenum}' // the pattern using {pagenum} tag ) ); } ?> ``` ## 螢幕擷圖 * [[ * Pagination example on Desktop * [[ * Pagination example on Tablet * [[ * Pagination example on Phone * [[ * Admin – Convert Paginations * [[ * Admin – Pagination Settings * [[ * Admin – Pagination Settings (Breakpoint Configurations) ## 安裝方式 The installation is pretty standard, just like any other plugins. 1. install the plugin through the WordPress admin on ‘Plugins’ screen directly, or upload the plugin files to the `/wp-content/plugins/responsive-pagination` directory. 2. Activate the plugin through the ‘Plugins’ screen in WordPress admin. 3. Use “Settings > Responsive Pagination” screen within WordPress admin to configure the plugin. ## 常見問題集 ### Where can I found the Admin Settings Page In the admin, go to “Settings > Responsive Pagination” ### What is “320px and up”, “720px and up”, etc ? Those are the breakpoints you’ll want to configure. Each denotes the minimum width of viewport where the corresponding configuration will be applied until the next breakpoint. The highest breakpoint configuration will be applied for all bigger viewport. For instance, if there are 3 breakpoints (320px, 720px, and 1024px), then * “320px and up” configuration is applied to viewport width of 320px – 719px * “720px and up” configuration is applied to viewport width of 720px – 1023px. * “1024px and up” configuration is applied to viewport width of 1024px and more ### What is “tags” ? A tag in Responsive Pagination is like a variable where it holds a value and will be rendered with the actual value. `{current}` and `{total}` are the example of tags. So, if the current page is 5 and total page is 12, then `"Page {current} of {total}"` will render “Page 5 of 12”. ### My pagination is responsive now, but I want to customize it more If you want to apply more custom styling, you can set additional class to the components from Admin Settings, and apply manual CSS. ## 使用者評論 ![](https://secure.gravatar.com/avatar/6981295cd810f036dc2488edb93612d897f51454f5456611d5b559056cbbe54d? s=60&d=retro&r=g) ### 󠀁[Finally!](https://wordpress.org/support/topic/nice-plugin-keep-going/)󠁿 [Bunderan 11 Store](https://profiles.wordpress.org/bunderan11/) 2020 年 5 月 22 日 Finally we can configure our responsive pagination, instead of just letting our theme decide it for us. Nice plugin, keep going.. Thanks! [ 閱讀全部 1 則使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Responsive Pagination〉的開發相關工作。 參與者 * [ Bagus Sasikirono ](https://profiles.wordpress.org/sasikirono/) [將〈Responsive Pagination〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/responsive-pagination) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/responsive-pagination/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/responsive-pagination/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/responsive-pagination/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/responsive-pagination/)。 ## 變更記錄 #### 1.4.1 * Fix: Responsive issue on Firefox in 1 pixel below lowest breakpoint #### 1.4.0 * Feature : Take approach to avoid theme styling interference as possible * Improvement: Breakpoint Configurations now in separate tab * Improvement: Change in Pagination Settings looks * Improvement: Active vertical menu style when in focus * Improvement: Active vertical menu go to right tab after adding & removing breakpoints * Improvement: Add footer signature #### 1.3.0 * Feature: Introduce visual styling feature * Feature: Different items width for every component in every breakpoint (pagenumbers, prevNext link, and firstLast link) * Feature: Different items height in every breakpoints * Feature: Different space between items (gutter) in every breakpoints * Tweak: Pagination settings initial values #### 1.2.0 * First public release. ## 中繼資料 * 版本 **1.4.1** * 最後更新 **5 年前** * 啟用安裝數 **10+** * WordPress 版本需求 ** 3.5.0 或更新版本 ** * 已測試相容的 WordPress 版本 **5.8.13** * PHP 版本需求 ** 5.3 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/responsive-pagination/) * 標籤: * [mobile](https://tw.wordpress.org/plugins/tags/mobile/)[pagination](https://tw.wordpress.org/plugins/tags/pagination/) [responsive](https://tw.wordpress.org/plugins/tags/responsive/) * [進階檢視](https://tw.wordpress.org/plugins/responsive-pagination/advanced/) ## 評分 5 星，滿分為 5 星 * [ 1 個 5 星使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/responsive-pagination/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/responsive-pagination/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/responsive-pagination/reviews/) ## 參與者 * [ Bagus Sasikirono ](https://profiles.wordpress.org/sasikirono/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/responsive-pagination/)