為 WordPress 的版面增加 閱讀區域 延展功能

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 右邊都出現 "放大閱讀區 》" 得字樣, 直接點選就可以看到效果.

關於 Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
本篇發表於 My_Note 並標籤為 。將永久鏈結加入書籤。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料