サポート » マルチサイト » ページネーションの省略記号のいちを設定したい

  • 解決済 keiaa

    (@keiaa)


    今現在WordPressでアーカイブページのページネーションを作成しています。

    JQを使用して、ページネーションを表示し機能させることは出来たのですが、

    JQの扱いに素人で、どこをどう弄ると、
    省略記号の位置を変えることができるのか分かりません。

    参考にしているサイトは、
    https://shanabrian.com/web/jquery/pagination.php
    で、この通りに作っています。

    今のサイトの表示は、CSSを設定していませんので、下記のようになっています。


    ・・・



    ・・・

    理想は




    ・・・

    これを目指しています。

    このサイトの、jquery.pagination.jsファイルの内容で、
    おそらく下記コードの省略記号の部分が、省略記号、{・・・}のいちを決めているのだと思うのですが、
    どこをどういじればいいのかご教授いただけませんでしょうか?

    /* =============================================================================
    	Pagination ver1.0.7
    	Copyright(c) 2015, ShanaBrian
    	Dual licensed under the MIT and GPL licenses.
    ============================================================================= */
    (function($) {
    	$.fn.pagination = function(options) {
    		if ($(this).length === 0) return this;
    
    		if ($(this).length > 1) {
    			var these = [];
    			$.each(this, function() {
    				these.push($(this).pagination(options));
    			});
    			return $(these);
    		}
    
    		var $element           = this,
    			$items             = null,
    			$paginationItems   = null,
    			$prevPageBtnBox    = null,
    			$nextPageBtnBox    = null,
    			$firstPageBtnBox   = null,
    			$endPageBtnBox     = null,
    			$firstPageEllipsis = null,
    			$endPageEllipsis   = null,
    			$pageInfo          = null,
    			settings           = {},
    			status             = {};
    
    		/**
    		 * 初期化
    		 */
    		var init = function() {
    			/*
    				paginationMode                 : ページ切り替え機能の有無(デフォルトはオンでオフで初期定義されている機能を使う)
    				itemElement                    : アイテムの要素
    				defaultDisplayPageNumber       : 初期表示するページ番号
    				displayItemCount               : 1ページ毎に表示する個数
    				prevNextPageBtnMode            : 前・次のページへ移動するボタン機能の有無
    				firstEndPageBtnMode            : 最初・最後のページへ移動するボタン機能の有無
    				bothEndsBtnHideDisplay         : 先端または終端時に前へ・次へボタンを非表示にするかどうか
    				pageLinkMode                   : ページ番号のリンク要素を追加するかどうか
    				pageNumberLinkPrefix           : ページ番号のhrefのプレフィックス
    				currentpageLinkUnWrap          : カレント時のa要素を外すかどうか
    				pageNumberDisplayNumber        : ページ番号の表示個数
    				onePageOnlyDisplay             : 1ページのみの場合にページネーションを表示するかどうか
    				onePageOnlyPrevNextPageDisplay : 1ページのみの場合に前・次のページへ移動するボタンを表示するかどうか
    				onePageOnlyFirstEndPageDisplay : 1ページのみの場合に最初・最後のページへ移動するボタンを表示するかどうか
    				pageInfoDisplay                : ページ情報の表示の有無
    				pageInfoFormat                 : ページ情報の表示する文字列の書式
    				ellipsisMode                   : 省略記号を表示するかどうか
    				ellipsisText                   : 省略記号
    				ellipsisMaxPageNumber          : 省略記号が表示される最大ページ数
    				clickUserFunction              : クリックのユーザー定義関数(この機能を使うとページ切り替えが行われない)
    				wrapElement                    : 親要素を包む要素
    				prevBtnText                    : 前のページへ移動するボタンの文字列(要素指定可能)
    				nextBtnText                    : 次のページへ移動するボタンの文字列(要素指定可能)
    				firstPageBtnText               : 最初のページへ移動するボタンの文字列(要素指定可能)
    				endPageBtnText                 : 最後のページへ移動するボタンの文字列(要素指定可能)
    				paginationClassName            : ページネーション本体のクラス名
    				paginationInnerClassName       : ページネーション本体の内側のクラス名
    				pageNumberClassName            : ページ番号のクラス名
    				currentPageNumberClassName     : カレントページ番号のクラス名
    				prevBtnClassName               : 前のページへ移動するボタンのクラス名
    				nextBtnClassName               : 次のページへ移動するボタンのクラス名
    				firstBtnClassName              : 最初のページへ移動するボタンのクラス名
    				endBtnClassName                : 最後のページへ移動するボタンのクラス名
    				prevNextBtnDisabledClassName   : 前・次のページへ移動するボタンの機能無効時のクラス名
    				ellipsisClassName              : 省略記号のクラス名
    				pageInfoClassName              : ページ番号表示のクラス名
    				setPagination                  : ページネーションを設置する箇所
    				setPaginationMode              : ページネーションを設置する方法
    				changeStartCallback            : 切り替え開始時のコールバック関数
    				changeEndCallback              : 切り替え終了時のコールバック関数
    			*/
    			settings = $.extend({
    				paginationMode                 : true,
    				itemElement                    : null,
    				defaultDisplayPageNumber       : 1,
    				displayItemCount               : 10,
    				prevNextPageBtnMode            : false,
    				firstEndPageBtnMode            : false,
    				bothEndsBtnHideDisplay         : true,
    				pageLinkMode                   : true,
    				pageNumberLinkPrefix           : '#page-',
    				currentpageLinkUnWrap          : false,
    				pageNumberDisplayNumber        : 5,
    				onePageOnlyDisplay             : true,
    				onePageOnlyPrevNextPageDisplay : false,
    				onePageOnlyFirstEndPageDisplay : false,
    				pageInfoDisplay                : false,
    				pageInfoFormat                 : 'Page %n / %m',
    				ellipsisMode                   : true,
    				ellipsisText                   : '...',
    				ellipsisMaxPageNumber          : 5,
    				clickUserFunction              : null,
    				wrapElement                    : 'div',
    				prevBtnText                    : '<',
    				nextBtnText                    : '>',
    				firstPageBtnText               : '<<',
    				endPageBtnText                 : '>>',
    				prevBtnAriaLabel               : 'Previous',
    				nextBtnAriaLabel               : 'Next',
    				firstPageBtnAriaLabel          : 'First Page',
    				endPageBtnAriaLabel            : 'End Page',
    				paginationClassName            : '',
    				paginationInnerClassName       : '',
    				pageNumberClassName            : '',
    				currentPageNumberClassName     : 'current',
    				prevBtnClassName               : 'prev-page',
    				nextBtnClassName               : 'next-page',
    				firstBtnClassName              : 'first-page',
    				endBtnClassName                : 'end-page',
    				prevNextBtnDisabledClassName   : 'disabled',
    				ellipsisClassName              : 'ellipsis',
    				pageInfoClassName              : 'page-info',
    				setPagination                  : '',
    				setPaginationMode              : 'after',
    				changeStartCallback            : function() {},
    				changeEndCallback              : function() {},
    				idPrefix                       : 'pg'
    			}, options);
    
    			$items = $element.find(settings.itemElement);
    
    			if ($items.length === 0) return;
    			if (!settings.onePageOnlyDisplay && $items.length <= settings.displayItemCount) return;
    
    			status = {
    				id               : settings.idPrefix + new Date().getTime() + '_' + Math.floor(Math.random() * 10000),
    				status           : 'wait',
    				activePageNumber : 0,
    				maxPageNumber    : 0,
    				startPageNumber  : 0,
    				historyPage      : []
    			};
    
    			setup();
    		};
    
    		/**
    		 * セットアップ
    		 */
    		var setup = function() {
    			status.activePageNumber = settings.defaultDisplayPageNumber;
    			status.maxPageNumber    = Math.ceil($items.length / settings.displayItemCount);
    			status.startPageNumber  = settings.defaultDisplayPageNumber;
    
    			if (settings.defaultDisplayPageNumber > status.maxPageNumber) {
    				status.startPageNumber = status.maxPageNumber;
    			}
    
    			changeStatus();
    			createNavigation();
    			movePage();
    			changePaginationPosition();
    			changeEllipsis();
    		};
    
    		/**
    		 * ナビゲーションの生成
    		 */
    		var createNavigation = function() {
    			var $paginationWrap         = $('<' + settings.wrapElement + '>'),
    				$paginationBox          = $('<ul>'),
    				$paginationItem         = $('<li>'),
    				$paginationItemC        = null,
    				$prevPageBtn            = null,
    				$nextPageBtn            = null,
    				$firstPageBtn           = null,
    				$endPageBtnBoxLink      = null,
    				$firstPageEllipsisInner = null,
    				$endPageEllipsisInner   = null,
    				i                       = 0;
    
    			$paginationBox.attr('role', 'menubar');
    
    			$paginationWrap.addClass(settings.paginationClassName);
    			$paginationBox.addClass(settings.paginationInnerClassName);
    
    			for (i = 1; i <= status.maxPageNumber; i++) {
    				$paginationItemC = $paginationItem.clone();
    
    				if (settings.pageLinkMode) {
    					var $paginationItemAnchor = $('<a>');
    					$paginationItemAnchor.text(i).attr('href', settings.pageNumberLinkPrefix + i);
    					$paginationItemC.append($paginationItemAnchor);
    				} else {
    					$paginationItemC.text(i);
    				}
    				$paginationItemC.attr('data-value', i).data('page-number', i);
    				$paginationBox.append($paginationItemC);
    			}
    
    			$paginationWrap.append($paginationBox);
    
    			$paginationItems = $paginationWrap.find('li');
    
    			// 前・次のページへ移動するボタン
    			if (settings.prevNextPageBtnMode) {
    				$prevPageBtnBox = $('<p>');
    				$nextPageBtnBox = $('<p>');
    				$prevPageBtn    = $('<button>').attr('type', 'button');
    				$nextPageBtn    = $('<button>').attr('type', 'button');
    
    				$prevPageBtnBox.html(settings.prevBtnText);
    				$nextPageBtnBox.html(settings.nextBtnText);
    				$prevPageBtnBox.attr(settings.prevBtnAriaLabel);
    				$nextPageBtnBox.attr(settings.nextBtnAriaLabel);
    				$prevPageBtnBox.addClass(settings.prevBtnClassName);
    				$nextPageBtnBox.addClass(settings.nextBtnClassName);
    
    				$prevPageBtnBox.html($prevPageBtn.html($prevPageBtnBox.html()));
    				$nextPageBtnBox.html($nextPageBtn.html($nextPageBtnBox.html()));
    
    				$paginationWrap.prepend($prevPageBtnBox).append($nextPageBtnBox);
    			}
    
    			// 最初・最後のページへ移動するボタン
    			if (settings.firstEndPageBtnMode) {
    				$firstPageBtnBox   = $('<p>');
    				$endPageBtnBox     = $('<p>');
    				$firstPageBtn      = $('<button>').attr('type', 'button');
    				$endPageBtnBoxLink = $('<button>').attr('type', 'button');
    
    				$firstPageBtnBox.html(settings.firstPageBtnText);
    				$endPageBtnBox.html(settings.endPageBtnText);
    				$firstPageBtnBox.addClass(settings.firstBtnClassName);
    				$endPageBtnBox.addClass(settings.endBtnClassName);
    
    				if (settings.pageLinkMode) {
    					$firstPageBtn.attr('href', settings.pageNumberLinkPrefix + 1);
    					$endPageBtnBoxLink.attr('href', settings.pageNumberLinkPrefix + status.maxPageNumber);
    					$firstPageBtnBox.html($firstPageBtn.html($firstPageBtnBox.html()));
    					$endPageBtnBox.html($endPageBtnBoxLink.html($endPageBtnBox.html()));
    				}
    
    				$paginationWrap.prepend($firstPageBtnBox).append($endPageBtnBox);
    			}
    
    			// 省略記号
    			if (settings.ellipsisMode && settings.ellipsisMaxPageNumber <= status.maxPageNumber) {
    				$firstPageEllipsis      = $paginationItem.clone();
    				$endPageEllipsis        = $paginationItem.clone();
    				$firstPageEllipsisInner = $('<span>');
    				$endPageEllipsisInner   = $('<span>');
    
    				$firstPageEllipsis.addClass(settings.ellipsisClassName);
    				$endPageEllipsis.addClass(settings.ellipsisClassName);
    
    				$firstPageEllipsisInner.html(settings.ellipsisText);
    				$endPageEllipsisInner.html(settings.ellipsisText);
    
    				$firstPageEllipsis.append($firstPageEllipsisInner);
    				$endPageEllipsis.append($endPageEllipsisInner);
    
    				$paginationItems.first().after($firstPageEllipsis);
    				$paginationItems.last().before($endPageEllipsis);
    			}
    
    			var $setBase = settings.setPagination ? $(settings.setPagination) : $element;
    
    			if (settings.setPaginationMode) {
    				if (settings.setPaginationMode === 'after') {
    					$setBase.after($paginationWrap);
    				} else if (settings.setPaginationMode === 'before') {
    					$setBase.before($paginationWrap);
    				} else if (settings.setPaginationMode === 'append') {
    					$setBase.append($paginationWrap);
    				} else if (settings.setPaginationMode === 'prepend') {
    					$setBase.prepend($paginationWrap);
    				}
    			}
    
    			// ページ番号
    			if (settings.pageInfoDisplay) {
    				$pageInfo = $('<p>');
    
    				$pageInfo.addClass(settings.pageInfoClassName);
    
    				$paginationWrap.append($pageInfo);
    
    				setPageInfo();
    			}
    
    			addEvent();
    		};
    
    		/**
    		 * イベント追加
    		 */
    		var addEvent = function() {
    			$paginationItems.find('a').on('click', nextPage);
    
    			if (settings.prevNextPageBtnMode) {
    				$prevPageBtnBox.on('click', function() {
    					$element.movePrevPage(settings.changeEndCallback, settings.changeStartCallback);
    					return false;
    				});
    
    				$nextPageBtnBox.on('click', function() {
    					$element.moveNextPage(settings.changeEndCallback, settings.changeStartCallback);
    					return false;
    				});
    			}
    
    			if (settings.firstEndPageBtnMode) {
    				$firstPageBtnBox.on('click', function() {
    					$element.moveFirstPage(settings.changeEndCallback, settings.changeStartCallback);
    					return false;
    				});
    
    				$endPageBtnBox.on('click', function() {
    					$element.moveEndPage(settings.changeEndCallback, settings.changeStartCallback);
    					return false;
    				});
    			}
    		};
    
    		/**
    		 * 次のページへ移動
    		 */
    		var nextPage = function() {
    			var pageNumber = Number($(this).parent().data('page-number'));
    			if (!pageNumber || pageNumber === status.activePageNumber) return false;
    			$element.movePage(pageNumber, settings.changeEndCallback, settings.changeStartCallback);
    			return false;
    		};
    
    		/**
    		 * 表示するアイテムの範囲を取得(戻り値:インデックス番号)
    		 */
    		var getDisplayItemRange = function() {
    			var results = [];
    			$.each($items, function(itemIndex) {
    				var itemPageNumber = Math.ceil((itemIndex + 1) / settings.displayItemCount);
    				if (itemPageNumber === status.activePageNumber) {
    					results.push(itemIndex);
    				}
    			});
    			return results;
    		};
    
    		/**
    		 * 前のページの番号を取得
    		 */
    		var getPrevPageNumber = function() {
    			var result = -1;
    			if (status.activePageNumber > 1) {
    				result = status.activePageNumber - 1;
    			}
    			return result;
    		};
    
    		/**
    		 * 次のページの番号を取得
    		 */
    		var getNextPageNumber = function() {
    			var result = -1;
    			if (status.activePageNumber < status.maxPageNumber) {
    				result = status.activePageNumber + 1;
    			}
    			return result;
    		};
    
    		/**
    		 * 最初のページの番号を取得
    		 */
    		var getFirstPageNumber = function() {
    			return 1;
    		};
    
    		/**
    		 * 最後のページの番号を取得
    		 */
    		var getEndPageNumber = function() {
    			return status.maxPageNumber;
    		};
    
    		/**
    		 * ページ番号を設定
    		 * @param {number} pageNumber ページ番号
    		 */
    		var setPageNumber = function(pageNumber) {
    			var result = false;
    			if (pageNumber && String(pageNumber).match(/^[0-9]+$/)) {
    				status.historyPage.push(status.activePageNumber);
    				status.activePageNumber = Number(pageNumber);
    				result = true;
    			}
    			return result;
    		};
    
    		/**
    		 * ページの移動
    		 * @param {function} callback コールバック関数
    		 * @param {function}} startCallback 実行前のコールバック関数
    		 */
    		var movePage = function(callback, startCallback) {
    			var targetIndexs = getDisplayItemRange();
    
    			if (startCallback && typeof startCallback === 'function') {
    				startCallback.apply($element, [status]);
    			}
    
    			$.each($items, function(itemIndex) {
    				if ($.inArray(itemIndex, targetIndexs) !== -1) {
    					$(this).show();
    				} else {
    					$(this).hide();
    				}
    			});
    
    			changeStatus();
    			changeClassName();
    			changeAriaAttr();
    
    			if (callback && typeof callback === 'function') {
    				callback.apply($element, [status]);
    			}
    
    			return $element;
    		};
    
    		/**
    		 * ページネーションの表示範囲を取得
    		 */
    		var getViewPaginationPosition = function() {
    			var result    = false,
    				half      = 0,
    				startPage = 0,
    				endPage   = 0;
    
    			if (settings.pageNumberDisplayNumber === 0) return false;
    			if (settings.pageNumberDisplayNumber >= status.maxPageNumber) return false;
    
    			half = Math.ceil(settings.pageNumberDisplayNumber / 2);
    
    			if (status.activePageNumber <= half) {
    				startPage = 1;
    			} else {
    				startPage = status.activePageNumber - half + 1;
    			}
    
    			endPage = startPage + settings.pageNumberDisplayNumber - 1;
    
    			if (endPage > status.maxPageNumber) {
    				startPage = status.maxPageNumber - settings.pageNumberDisplayNumber + 1;
    				endPage   = status.maxPageNumber;
    			}
    
    			result = {
    				startPage : startPage,
    				endPage   : endPage
    			};
    
    			return result;
    		};
    
    		/**
    		 * ページネーションの表示範囲を変更
    		 */
    		var changePaginationPosition = function() {
    			var position = getViewPaginationPosition();
    
    			if (!position) return;
    
    			$.each($paginationItems, function() {
    				var thisPage = $(this).data('page-number');
    				if (thisPage >= position.startPage && thisPage <= position.endPage) {
    					$(this).show();
    				} else {
    					$(this).hide();
    				}
    			});
    		};
    
    		/**
    		 * ページ番号の設定
    		 */
    		var setPageInfo = function() {
    			var setText = settings.pageInfoFormat;
    
    			if (!settings.pageInfoDisplay) return;
    
    			setText = setText.replace('%n', status.activePageNumber);
    			setText = setText.replace('%m', status.maxPageNumber);
    			$pageInfo.html(setText);
    		};
    
    		/**
    		 * 省略記号の切り替え
    		 */
    		var changeEllipsis = function() {
    			if (!settings.ellipsisMode || settings.ellipsisMaxPageNumber > status.maxPageNumber) return;
    
    			var position = getViewPaginationPosition();
    
    			if (!position) return;
    
    			if (position.startPage > 1) {
    				$.each($paginationItems, function() {
    					if (Number($(this).data('page-number')) === 1) {
    						$(this).show();
    						return false;
    					}
    				});
    				$firstPageEllipsis.show();
    			} else {
    				$firstPageEllipsis.hide();
    			}
    
    			if (position.endPage < status.maxPageNumber) {
    				$.each($paginationItems, function() {
    					if (Number($(this).data('page-number')) === status.maxPageNumber) {
    						$(this).show();
    						return false;
    					}
    				});
    				$endPageEllipsis.show();
    			} else {
    				$endPageEllipsis.hide();
    			}
    		};
    
    		/**
    		 * クラス名の切り替え
    		 */
    		var changeClassName = function() {
    			var targetIndex       = status.activePageNumber - 1;
    			var currentClassName  = settings.currentPageNumberClassName;
    			var disabledClassName = settings.prevNextBtnDisabledClassName;
    
    			var $nextTurrentItem = $paginationItems.eq(targetIndex);
    			var $prevCurrentItem = $nextTurrentItem.siblings('.' + currentClassName);
    
    			$nextTurrentItem.addClass(currentClassName);
    			$prevCurrentItem.removeClass(currentClassName);
    
    			if (settings.pageLinkMode && settings.currentpageLinkUnWrap) {
    				$nextTurrentItem.text($nextTurrentItem.attr('data-value'));
    
    				var i = $prevCurrentItem.attr('data-value');
    				var $paginationItemAnchor = $('<a>').attr('href', settings.pageNumberLinkPrefix + i);
    				$prevCurrentItem.wrapInner($paginationItemAnchor);
    
    				$paginationItemAnchor.on('click', nextPage);
    			}
    
    			if (status.activePageNumber === 1) {
    				if (settings.prevNextPageBtnMode) {
    					$prevPageBtnBox.addClass(disabledClassName);
    					$nextPageBtnBox.removeClass(disabledClassName);
    				}
    				if (settings.firstEndPageBtnMode) {
    					$firstPageBtnBox.addClass(disabledClassName);
    					$endPageBtnBox.removeClass(disabledClassName);
    				}
    			} else if (status.activePageNumber === status.maxPageNumber) {
    				if (settings.prevNextPageBtnMode) {
    					$prevPageBtnBox.removeClass(disabledClassName);
    					$nextPageBtnBox.addClass(disabledClassName);
    				}
    				if (settings.firstEndPageBtnMode) {
    					$firstPageBtnBox.removeClass(disabledClassName);
    					$endPageBtnBox.addClass(disabledClassName);
    				}
    			} else {
    				if (settings.prevNextPageBtnMode) {
    					$prevPageBtnBox.removeClass(disabledClassName);
    					$nextPageBtnBox.removeClass(disabledClassName);
    				}
    				if (settings.firstEndPageBtnMode) {
    					$firstPageBtnBox.removeClass(disabledClassName);
    					$endPageBtnBox.removeClass(disabledClassName);
    				}
    			}
    		};
    
    		/**
    		 * ARIA属性切り替え
    		 */
    		var changeAriaAttr = function() {
    			var targetIndex = status.activePageNumber - 1;
    
    			$paginationItems.eq(targetIndex).attr('aria-selected', 'true');
    			$paginationItems.eq(targetIndex).siblings().not('.' + settings.ellipsisClassName).attr('aria-selected', 'false');
    		};
    
    		/**
    		 * ステータスの切り替え
    		 */
    		var changeStatus = function() {
    			if (status.activePageNumber === 1) {
    				status.status = 'start';
    			} else if (status.activePageNumber === status.maxPageNumber) {
    				status.status = 'end';
    			} else {
    				status.status = 'middle';
    			}
    		};
    
    		/**
    		 * ステータスの取得(メソッド)
    		 */
    		$element.getStatus = function() {
    			return status;
    		};
    
    		/**
    		 * 前のページへ移動(メソッド)
    		 */
    		$element.movePrevPage = function(callback, startCallback) {
    			var pageNumber = getPrevPageNumber();
    
    			if (!callback || callback && typeof callback !== 'function') {
    				callback = function() {};
    			}
    
    			if (!startCallback || startCallback && typeof startCallback !== 'function') {
    				startCallback = function() {};
    			}
    
    			if (pageNumber !== -1 && pageNumber !== status.activePageNumber) {
    				setPageNumber(pageNumber);
    				movePage(callback, startCallback);
    				changePaginationPosition();
    				changeEllipsis();
    				setPageInfo();
    			}
    
    			return $element;
    		};
    
    		/**
    		 * 次のページへ移動(メソッド)
    		 */
    		$element.moveNextPage = function(callback, startCallback) {
    			var pageNumber = getNextPageNumber();
    
    			if (!callback || callback && typeof callback !== 'function') {
    				callback = function() {};
    			}
    
    			if (!startCallback || startCallback && typeof startCallback !== 'function') {
    				startCallback = function() {};
    			}
    
    			if (pageNumber !== -1 && pageNumber !== status.activePageNumber) {
    				setPageNumber(pageNumber);
    				movePage(callback, startCallback);
    				changePaginationPosition();
    				changeEllipsis();
    				setPageInfo();
    			}
    
    			return $element;
    		};
    
    		/**
    		 * 最初のページへ移動(メソッド)
    		 */
    		$element.moveFirstPage = function(callback, startCallback) {
    			var pageNumber = getFirstPageNumber();
    
    			if (!callback || callback && typeof callback !== 'function') {
    				callback = function() {};
    			}
    
    			if (!startCallback || startCallback && typeof startCallback !== 'function') {
    				startCallback = function() {};
    			}
    
    			if (pageNumber !== -1 && pageNumber !== status.activePageNumber) {
    				setPageNumber(pageNumber);
    				movePage(callback, startCallback);
    				changePaginationPosition();
    				changeEllipsis();
    				setPageInfo();
    			}
    
    			return $element;
    		};
    
    		/**
    		 * 最後のページへ移動(メソッド)
    		 * @param {function} callback 移動後のコールバック関数
    		 * @param {function} startCallback 移動前のコールバック関数
    		 */
    		$element.moveEndPage = function(callback, startCallback) {
    			var pageNumber = getEndPageNumber();
    
    			if (!callback || callback && typeof callback !== 'function') {
    				callback = function() {};
    			}
    
    			if (!startCallback || startCallback && typeof startCallback !== 'function') {
    				startCallback = function() {};
    			}
    
    			if (pageNumber !== -1 && pageNumber !== status.activePageNumber) {
    				setPageNumber(pageNumber);
    				movePage(callback, startCallback);
    				changePaginationPosition();
    				changeEllipsis();
    				setPageInfo();
    			}
    
    			return $element;
    		};
    
    		/**
    		 * ページの移動(メソッド)
    		 * @param {number} pageNumber 移動するページ番号
    		 * @param {function} callback 移動後のコールバック関数
    		 * @param {function} startCallback 移動前のコールバック関数
    		 */
    		$element.movePage = function(pageNumber, callback, startCallback) {
    			if ((pageNumber || pageNumber === 0) && String(pageNumber).match(/^[0-9]+$/)) {
    
    				if (!callback || callback && typeof callback !== 'function') {
    					callback = function() {};
    				}
    
    				if (!startCallback || startCallback && typeof startCallback !== 'function') {
    					startCallback = function() {};
    				}
    
    				setPageNumber(pageNumber);
    				movePage(callback, startCallback);
    				changePaginationPosition();
    				changeEllipsis();
    				setPageInfo();
    			}
    
    			return $element;
    		};
    
    		init();
    
    		return this;
    	};
    })(jQuery);
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック投稿者 keiaa

    (@keiaa)

    ファイルを追加します。
    archive.php

    
    
    <?php get_header(); ?>
    <section class=&quot;blog-archive-wrapper&quot;>
        <div class=&quot;blog-archive-wrapper-second&quot;>
            <div class=&quot;blog-archive-outer&quot;>
                <h2 class=&quot;blog-archive-outer-title&quot;>新着一覧</h2>
                    <div class=&quot;pagination-second &quot;>
                        <div class=&quot;list-box pagination&quot;>
                            <div class=&quot;items&quot;>
                                <?php
                                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                                $the_query = new WP_Query(array(
                                    'post_status'    => 'publish',
                                    'post_type'      => 'post', // ページの種類(例、page、post、カスタム投稿タイプ)
                                    'paged'          => $paged,
                                    'orderby'        => 'date',
                                    'order'          => 'DESC'
                                ));
                                if ($the_query->have_posts()) :
                                    while ($the_query->have_posts()) : $the_query->the_post();
                                ?>
                                        <?php // ブログの一覧を表示する start ?>
                                        
                                             <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
                                                 <div class=&quot;item&quot;>
                                                <article class=&quot;blog-list__list-item&quot;> 
                                                   
                                                    <div class=&quot;blog-list-category&quot;>
                                                        <?php
                                                        $undef_category = (count(get_the_category()) == 0) || in_category('1');
                                                        if ($undef_category == true) {
                                                            $category = get_the_category();
                                                            echo $category[0]->cat_name;
                                                        } else {
                                                            $category = get_the_category();
                                                            echo $category[0]->cat_name . &quot;一覧&quot;;
                                                        }
                                                        ?>
                                                    </div>
                                                    <div class=&quot;blog-list-wrapper-second&quot;>
                                                        <?php // アイキャッチを表示させる start 
                                                        ?>
                                                        <div class=&quot;blog-item-thumbnail-second&quot;>
                                                            <?php if (has_post_thumbnail()) : ?>
                                                                <div class=&quot;thumbnail-image-second&quot;><?php the_post_thumbnail(array(240, 148)); ?></div>
                                                            <?php else : ?>
                                                                <div class=&quot;thumbnail-image-second&quot;>
                                                                    <img src=&quot;<?php echo get_template_directory_uri(); ? />/images/sample4.png&quot; alt=&quot;デフォルトのアイキャッチ画像&quot; width=&quot;240&quot; height=&quot;148&quot; />
                                                                </div>
                                                            <?php endif; ?>
                                                        </div>
                                                        <?php // アイキャッチを表示させる end 
                                                        ?>
                                                    </div>
    
                                                    <div class=&quot;blog-item-content&quot;>
                                                        <p class=&quot;blog-item-day-second&quot;><?php the_time('Y-m-d'); ?></p>
                                                        <?php // タイトルを表示させる start 
                                                        ?>
                                                        <a href=&quot;<?php the_permalink(); ?>&quot; class=&quot;blog-item&quot;>
                                                            <h3 class=&quot;blog-item-title&quot;>
                                                                <div class=&quot;blog-item-title-container&quot;>
                                                                    <?php
                                                                    if (mb_strlen($post->post_title, 'UTF-8') > 20) {
                                                                        $title = mb_substr($post->post_title, 0, 20, 'UTF-8');
                                                                        echo $title . '…';
                                                                    } else {
                                                                        echo $post->post_title;
                                                                    }
                                                                    ?>
                                                        </a>
                                                    </div>
                                                    <?php // タイトルを表示させる end 
                                                    ?>
                                                    <div class=&quot;blog-item-txt&quot;>
                                                        <?php // 抜粋を表示させる start 
                                                        ?>
                                                        <?php the_excerpt(); ?>
                                                        <?php // 抜粋を表示させる end 
                                                        ?>
                                                    </div>
                                                
                                                </article>
                                                </div> 
                                                <?php break; ?>
                                            <?php endwhile; ?>    
                                            <?php while (have_posts()) : the_post(); ?>
                                                 <div class=&quot;item&quot;>
                                       
                                                <article class=&quot;blog-list__list-item&quot;>
                                                    
                                                    <div class=&quot;blog-list-category&quot;> 
                                                        
                                                        <?php
                                                        $undef_category = (count(get_the_category()) == 0) || in_category('1');
                                                        if ($undef_category == true) {
                                                            $category = get_the_category();
                                                            echo $category[0]->cat_name;
                                                        } else {
                                                            $category = get_the_category();
                                                            echo $category[0]->cat_name . &quot;一覧&quot;;
                                                        }
                                                        ?>
                                                    </div>
                                                    <div class=&quot;blog-list-wrapper-second&quot;>
                                                        <?php // アイキャッチを表示させる start 
                                                        ?>
    
                                                        <div class=&quot;blog-item-thumbnail&quot;>
                                                            <?php if (has_post_thumbnail()) : ?>
                                                                <div class=&quot;thumbnail-image&quot;>
                                                                    <?php the_post_thumbnail(array(240, 179)); ?>
                                                                </div>
                                                            <?php else : ?>
                                                                <div class=&quot;thumbnail-image&quot;>
                                                                    <img src=&quot;<?php echo get_template_directory_uri(); ? />/images/sample4.png&quot; alt=&quot;デフォルトのアイキャッチ画像&quot; width=&quot;240&quot; height=&quot;179&quot; />
                                                                </div>
                                                            <?php endif; ?>
                                                    </div>
                                                        <?php // アイキャッチを表示させる end 
                                                        ?>
                                                    </div>
    
                                                    <div class=&quot;blog-item-content&quot;>
                                                        <p class=&quot;blog-item-day-second&quot;><?php the_time('Y-m-d'); ?></p>
                                                        <?php // タイトルを表示させる start 
                                                        ?>
    
                                                        <a href=&quot;<?php the_permalink(); ?>&quot; class=&quot;blog-item&quot;>
                                                            <h3 class=&quot;blog-item-title&quot;>
                                                                <?php
                                                                if (mb_strlen($post->post_title, 'UTF-8') > 20) {
                                                                    $title = mb_substr($post->post_title, 0, 20, 'UTF-8');
                                                                    echo $title . '…';
                                                                } else {
                                                                    echo $post->post_title;
                                                                }
                                                                ?></h3>
                                                        </a>
                                                        <?php // タイトルを表示させる end 
                                                        ?>
                                                        <?php // 抜粋を表示させる start 
                                                        ?>
                                                        <div class=&quot;blog-item-excerpt&quot;>
                                                            <?php echo mb_substr(get_the_excerpt(), 0, 50) . '[...]'; ?>
                                                        </div>
                                                        <?php // 抜粋を表示させる end 
                                                        ?>                 
                                                </article> 
                                               </div>
                                            <?php endwhile; ?>
                                        <?php endif; ?>    
    
                                        <?php // ブログの一覧を表示する end ?>
                                        <?php break; ?>      
                                <?php
                                    endwhile;
                                else :
                                    echo '<div><p>ありません。</p></div>';
                                endif;
                                ?>
                              
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </section>
    <?php get_footer(); ?>

    トピック投稿者 keiaa

    (@keiaa)

    jquery.pagination.jsの、118行目の
    setPagination : ”,
    この部分を正しく設定すればいいということが分かりました。
    設定の仕方わかる方いらっしゃいませんか?

    • この返信は3ヶ月、 2週前にkeiaaが編集しました。
    トピック投稿者 keiaa

    (@keiaa)

    すいません上記の

    jquery.pagination.jsの、118行目の
    setPagination : ”,
    この部分を正しく設定すればいいということが分かりました。

    これはおそらく間違いです。

    トピック投稿者 keiaa

    (@keiaa)

    pageNumberDisplayNumber : 3,
    ここを設定することで可能でした、
    ご思案くださった方々ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。