分割ページに対応してみた - M-Blog

分割ページに対応してみた

分割ページに対応してみた

スニペット「PageBreak」

スニペットの作成です。

if(!isset($target)) $target = ''; //分割する対象
if(!isset($breakPoint)) $breakPoint = '[BP]'; //ページを区切る文字列
if(!isset($paramPage)) $paramPage = 'page'; //ページ番号のパラメータ
if(!isset($toc)) $toc = 'false'; //目次を表示するか、しない場合はページャーが上にも表示
if(!isset($tocHeader)) $tocHeader = 'h2'; //目次に使用するHTMLタグ
$pageNum = $_GET[$paramPage];
$tocNav = '';
$pager='';

//区切り文字が対象にある場合
if(preg_match('/'.$breakPoint.'/', $target)){
	//リッチテキストが有効の場合は自動でタグが入るので<p>[BR]</p>から[BR]に置換
	if($modx->getField('richtext') == 1){
		$target = preg_replace('/<(.*?)'.$breakPoint.'\/(.*?)>/', $breakPoint, $target);
	}
	
	//分割した記事を配列にする
	$pages = explode($breakPoint, $target);
	
	//分割した記事の総数
	$total = count($pages);

	//現在のページが2ページ目後の場合
	if($pageNum > 1){
		$out = $pages[$pageNum - 1];
		
	//それ以外は1ページ目を表示してページ数に1を代入
	}else{
		$pageNum = 1;
		$out = $pages[0];
	}
	
	if($total > 1){
		//ページャーの作成
		//1ページ目には「前のページ」を表示させない、パラメータを付けない
		if($pageNum == 2){
			$prevNav = '<li><a href="[~[*id*]~]" class="uk-button uk-button-default"><span class="uk-margin-small-right" uk-pagination-previous></span> 前のページ</a></li>';
		}elseif($pageNum > 2){
			$prevNum = $pageNum - 1;
			$prevNav = '<li><a href="[~[*id*]~]?page='. $prevNum .'" class="uk-button uk-button-default"><span class="uk-margin-small-right" uk-pagination-previous></span> 前のページ</a></li>';
		}
	
		//各ページへのリンク、1ページへのリンクにはパラメータを付けない
		//現在のページとリンクのページ番号が同じならclassを追加
		for($i=0; $i < $total; $i++){
			$pagesNum = $i + 1;
			$current = '';
			if($pagesNum == $pageNum)$current = ' uk-active';
			if($pagesNum == 1){
				$pagesNav .= '<li><a href="[~[*id*]~]" class="uk-button uk-button-default'.$current.'">'.$pagesNum.'</a></li>';
			}else{
				$pagesNav .= '<li><a href="[~[*id*]~]?page='. $pagesNum .'" class="uk-button uk-button-default'.$current.'">'.$pagesNum.'</a></li>';
			}
		}
	
		//最終ページには「次のページ」を表示させない
		if($total > 0 && $pageNum != $total){
			$nextNum = $pageNum + 1;
			$nextNav = '<li><a href="[~[*id*]~]?page='. $nextNum .'" class="uk-button uk-button-default">次のページ <span class="uk-margin-small-left" uk-pagination-next></span></a></li>';
		}
		$pager = '<ul class="uk-pagination uk-flex-center">'.$prevNav.$pagesNav.$nextNav.'</ul>';
		
		//目次
		if($toc != 'false'){
			preg_match_all('/<'.$tocHeader.'>(.*?)<\/'.$tocHeader.'>/', $target, $tocTitles);
			$tocNav = '<ul>';
			$i = 1;
			foreach($tocTitles[1] as $title){
				if($i == 1){
					$tocNav .= '<li><a href="[~[*id*]~]">'.$title.'</a></li>';
				}else{
					$tocNav .= '<li><a href="[~[*id*]~]?page='. $i .'">'.$title.'</a></li>';
			}
				++$i;
			}
			$tocNav .= '</ul>';
		}else{
			$tocNav = $pager;
		}
	}
	//出力
	echo $tocNav.$out.$pager;
}else{
	echo $target;
}

ページャーがついていてもページの概要がわかりにくいので目次も作りようにしました。


2018年11月02日 / CMS

カテゴリー

アーカイブ

最近の投稿

最近の更新

リンク