Pagebar2與WP Page Numbers外掛的設定方式和差異

首先 這篇中有提到  我裝的wordpress 外掛清單 有特別提到Pagebar2與WP Page Numbers
這兩個外掛。
雖然都是讓原本沒有分頁只有上一頁下一頁沒有數字的切換分頁方式更換為有數字的方式,
但是,Pagebar2 卻讓我發現會讓邊欄的清單部分也多了這個分頁的顯示,雖然沒什麼妨礙功
能,卻會讓我覺得有點破壞版面的編排,感覺有點醜。
後來又發現了這個WP Page Numbers外掛,這篇有提到他的說明 除了他比較漂亮之外,對於
邊欄也不會造成影響,我個人比較偏好使用他,但是~
對於設定他還是要花一點點技巧,這邊就來特別說明一下了。

首先先來說說他的設定一些優點,如上圖,可以選擇分頁的不同風格,並且會使用CSS的人還能自行定義
再來就是修改英文顯示其他方式,如改中文或是用符號的方式表示,這邊也可以直接修改。
但是如果你要能夠取代掉原來的套版外皮的相關程式碼,就還要再多花功夫了~
每個Themes都會有點差異,以我目前用的外皮他的index.php他其中對翻頁的語法如下:
原css中的 上一頁下一頁 程式語法:
[php]
<?php
if($arjunaOptions[‘pagination’]) {
arjuna_get_pagination(__(‘Previous Page’, ‘Arjuna’), __(‘Next Page’, ‘Arjuna’));
} elseif(function_exists(‘wp_paginate’)) {
print ‘<div class="pagination">’;
wp_paginate();
print ‘</div>’;
} elseif(function_exists(‘wp_pagenavi’)) {
print ‘<div class="pagination">’;
wp_pagenavi();
print ‘</div>’;
} elseif(has_pages()) {
print ‘<div class="pagination"><div>’;
arjuna_get_previous_page_link(__(‘新一點的文章’, ‘Arjuna’));
arjuna_get_next_page_link(__(‘舊一點的文章’, ‘Arjuna’));
print ‘</div></div>’;
}
?>

<?php else : ?>
<p><?php _e(‘There is nothing here (yet).’, ‘Arjuna’); ?></p>
[/php]

找到像上面這樣的一段,通常都在index.php檔案的下方處,不熟悉程式的朋友可以邊看你的頁面
然後找找一些有顯示出來的文字,再做一下判斷,擔心改壞的話,記得先複製一下這整段程式碼到
新增的文字檔中,最多改壞了再覆蓋回去就好,別擔心~大膽點的修改他吧。
取代成功後(取代下面一點這段程式碼),你的首頁就能搭配上這個分頁動作了~
接著還有 兩個檔案也要改一下,要改變的檔案分別有:
archive.php, index.php or search.php 這三個檔案
簡單說明一下各自的用途,index.php 剛剛說過,首頁和各項的下一頁會用到的,
archive.php則是分類啦標籤啦這些頁面,search.php則是透過搜尋關鍵字標籤會用到的。
裡面的上段程式碼替換為:
[php]
<?php if(function_exists(‘wp_page_numbers’)) : wp_page_numbers(); endif; ?>
[/php]

這樣的程式碼。
分別找到後,更換這面這段比較短的部份,這個外掛就啟用成功了。
接著~ 如果你的底圖背景不是白色,像我選擇這個一樣,你會發現,外掛顯示的分頁底圖顏色是白
的,將會有點… 感覺不太對的味道,像我龜毛的個性,就想再修改一下他了。
對於這個部分,你如果懂css~ 那直接改版型的設定即可。但是像我這樣不太懂得到底這表皮css怎麼
區分各自負責區塊的邏輯,只好直接動到原本外掛的css設定了~
要直接找到他的外掛到底哪改,最快的方式就是  點選外掛清單 然後按 編輯的功能。
這個編輯會直接帶你到外掛各自的配合相關程式碼檔案。
如下圖這張畫面。
這邊要注意了喔~
紅框中的各自檔案對應,就是對到你選擇用到的5個其中一個分頁顯示圖案。
像上面第一張圖的那名稱,最左邊的敘述文字。
例如我選的是『classic』我就是找『wp-page-numbers/classic/wp-page-numbers.css』這個檔案。
就是改這面藍色的部份了,我對css沒有很熟悉,目前只會改底色的部份,讓他和我的底色相同。
如果你還想多改些其他的,就自行再研究一下了。
怎麼找你的相關色碼,下面我找了兩個網站提供參考:
可參考的網站色碼選擇 下方有個配色用的示範 這個色碼表也很方便 參考使用看看了。
這樣~說明應該對基本使用和設定有些幫助了,如果還有其他需要補充說明的地方,請再留個言給我吧,
我會盡自己能夠回答的部份提供你一些協助的,但就如我上面說到的,我對css也還在學習中,不能完全
提供最好的協助還請多多見諒了。

吳 天元

溫厝的543大家長,平常沒時就愛碎碎唸,標準的阿宅。 平時就愛看電影、研究網路行銷,有時間當然也愛陪伴著家人! 總希望世界和平之外,更希望能看看外星人到底長啥模樣了!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *