WordPress 的 Template 版面, 目前都找不到喜歡的, 所以先自己加工, 讓這個版面先能合用再說~
現在的版面的 Theme 是 Coraline 1.0.2, 此 Theme 同時支援 2、3欄位的格式, 但是用三欄式的, 閱讀(文章)區域太小, 用二欄式的, 整個寬度也會拉小.
就是說 3欄式的, 整頁的寬度是我要的, 但是文章區域太小, 2欄式的, 整頁寬度變窄了.
於是先將就的話, 三欄式的問題, 就只有文章區域太小, 只要做一個可以將文章區域放大的就解決了~ 這個做起來比較簡單.
註: 測試的結果是, 可以同時將三欄右邊的兩欄都縮起來, 但是反而文章區域太大, 內容在看的時候, 頭需要轉動, 所以決定只縮一欄即可. (文章放太寬, 眼睛需要看太遠, 所以只放大到合適得距離即可.)
程式如下: (將下述加在外掛的任何一個模組, 或者版面裡面都可以, 但是要記得放最下面.)
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<style>.content-width-change {margin:-10px 0;text-align:right;display:block;position:relative;z-index:5;cursor:pointer;}</style>
<script>
$('.entry-title').after('<a>放大閱讀區 》</a>');
$('.content-width-change').click(function(){
if ($('#content').width() > 600) {
$('#content').width('50.5%');
$('#secondary').css('float', 'left');
$('#primary').css('display', 'block');
$('.content-width-change').text('放大閱讀區 》');
} else {
$('#primary').css('display', 'none');
$('#secondary').css('float', 'right');
$('#content').width('80%');
$('.content-width-change').text('《 縮回閱讀區');
}
});
</script>- 註1: 第一行 jQuery min 得, 如果已經有載入過, 此行可拿掉.
- 註2: 此段程式只有支援 Coraline 1.0.2 + 三欄式適用.
- 註3: 此外掛綁得是所有 Title, 所以會在所有文章 Title 右邊都出現 "放大閱讀區 》" 得字樣, 直接點選就可以看到效果.
