我在wordpress版型上添加的程式碼

從架站到現在
wordpress的預設版型被我做了多次修改
為了避免日後需要重新做起或者想換新的版型
所以我特別紀錄一下自己對版型做了什麼樣的修改

Header

  1. 推推王的主程式
    如果同個頁面中有多個推推王按鈕
    就必須在header中先讀入這個主要的javascript程式

    1. <script language="JavaScript" src="http://funp.com/js/funp_button.js"></script>
  2. technorati的主程式
    1. <script src="http://embed.technorati.com/linkcount" type="text/javascript"></script>
  3. google maps的API
    1. <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA0Blj1Sec6oB2j1J0W2K8gxQgYGSETDBC4Moc1YBVRelThb8XdxQIOuSFVztGkn_LfOoyM9oVCq7HlQ' type='text/javascript'></script>
    2. <script src='http://vicjuan.org/wp-includes/js/flickr-gmap.js' type='text/javascript'></script>

Footer

  1. clicky的主程式
    這是一個統計blog訪客資訊與流量的網站

    1. <script src="http://static.getclicky.com/7331.js" type="text/javascript"></script>
    2. <noscript><p><img alt="Clicky" src="http://static.getclicky.com/7331ns.gif" /></p></noscript>
  2. google analytics的主程式
    這是google用來統計網站訪客資訊與流量的工具程式

    1. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
    2. </script>
    3. <script type="text/javascript">
    4. _uacct = "UA-1391575-2";
    5. urchinTracker();
    6. </script>
  3. 創用CC的授權
    沒有實際上的功效
    純粹是宣告網站內容的使用授權方式

    1. <a href='http://creativecommons.org/licenses/by-nc-sa/2.5/tw/' rel='license'>
    2. <img alt='Creative Commons License' src='http://i.creativecommons.org/l/by-nc-sa/2.5/tw/88x31.png' style='border-width: 0'/></a>
    3. 本網站所有內容係採用<a href='http://creativecommons.org/licenses/by-nc-sa/2.5/tw/' rel='license'>創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款</a>授權.
  4. SparkStats的條狀圖
    這個條狀圖可以顯示網站的post跟comments發表情形
    不過其實我只是把它當作裝飾品來使用
    因為我根本看不懂那張圖…

    1. <img src="http://vicjuan.org/wp-content/plugins/sparkstats/curstats.png">

Main index, Archive, Search result

  1. flickr徽章
    用來隨機撥放我的flickr照片

    1. <!-- Start of Flickr Badge -->
    2. <style type="text/css">
    3. #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
    4. #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
    5. #flickr_icon_td {padding:0 5px 0 0 !important;}
    6. .flickr_badge_image {text-align:center !important;}
    7. .flickr_badge_image img {border: 1px solid black !important;}
    8. #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
    9. #flickr_badge_uber_wrapper a:hover,
    10. #flickr_badge_uber_wrapper a:link,
    11. #flickr_badge_uber_wrapper a:active,
    12. #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
    13. #flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
    14. #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
    15. </style>
    16. <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
    17. <tr>
    18. <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=h&source=user&user=49851674%40N00"></script>
    19. </tr>
    20. </table>
    21. </td></tr></table>
    22. <!-- End of Flickr Badge -->
  2. HEMIDEMI按鈕以及推推王按鈕
    用來讓讀者方便收藏書籤
    這段程式碼必須加在post loop之中
    才能讓每篇文章標題旁邊都出現按鈕

    1. <div class="hemidemi_bookmark_button" style="float:right;padding:0;margin:0;">
    2. <script type="text/javascript">
    3. HEMiDEMi_Bookmark_Button_URL = '<?php echo get_permalink() ?>';
    4. HEMiDEMi_Bookmark_Button_Style = 'button1';
    5. </script>
    6. <script src="http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js" type="text/javascript"></script>
    7. <p align="right"><script>funp_genButton('<?php echo get_permalink() ?>');</script></p>
    8. </div>
  3. technorati的blog reaction
    用來顯示連結到這篇文章的blog數量

    1. <a class="tr-linkcount" href="http://technorati.com/search/<?php the_permalink(); ?>">View blog reactions</a>
  4. WP-PostViews Plus的文章閱讀次數
    這段程式碼必須要有安裝這支plugin才會起作用

    1. <?php if(function_exists('the_views'))the_views(); ?>
  5. Pagebar的分頁
    這段程式碼也必須先安裝這支plugin才有用
    而且這段程式碼必須放在post loop之外

    1. <?php wp_pagebar(array('before'=>'pages:  ')); ?>

Single post

  1. HEMIDEMI按鈕以及推推王按鈕
    跟放在main page的程式碼是一樣的
  2. WP-PostViews Plus的文章閱讀次數
    跟放在main page的程式碼是一樣的
  3. technorati的blog reaction
    跟放在main page的程式碼是一樣的
  4. 常用收藏書籤按鈕
    方便使用者收各種網站的書籤

    1. <a href="http://www.hemidemi.com/user_bookmark/new?title=<?php the_title(); ?>&url=<?php the_permalink() ?>&description=&via=<?php the_permalink() ?>"><img border="0" src="http://vicjuan.org/images/hemidemi.jpg" alt="收進你的黑米個人書籤" title="收進你的黑米書籤" /></a>
    2. <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img border="0" src="http://vicjuan.org/images/delicious.png" alt="收進你的美味個人書籤" title="收進你的美味書籤" /></a>
    3. <a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>"><img border="0" src="http://vicjuan.org/images/digg.png" alt="Digg此篇文章" title="Digg此篇文" /></a> 
    4. <a href="http://www.furl.net/storeIt.jsp?t=<?php the_title(); ?>&u=<?php the_permalink() ?>"><img border="0" src="http://vicjuan.org/images/furl.png" alt="收進你的Furl個人書籤" title="收進你的Furl個人書籤" /></a>
    5. <a href="http://myshare.url.com.tw/index.php?func=newurl&url=<?php the_permalink() ?>&desc=<?php wp_title(); ?> | <?php bloginfo(’name’); ?>"><img border="0" src="http://vicjuan.org/images/myshare.jpg" alt="收進你的MyShare個人書籤" title="收進你的MyShare個人書籤" /></a>
    6. <a href="http://www.google.com/bookmarks/mark?op=add&bkmk=<?php the_permalink();?>&title=<?php the_title();?>"><img src="http://vicjuan.org/images/google.png" alt="Bookmark this post on Google."  title="Bookmark this post on Google."/></a>
    7. <a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<?php the_title(); ?>&u=<?php the_permalink() ?>"><img border="0" src="http://vicjuan.org/images/yahoo.png" alt="收進你的MyYahoo個人書籤" title="收進你的MyYahoo個人書籤" /></a>
    8. <a href="http://technorati.com/cosmos/search.html?url=<?php the_permalink();?>"><img src="http://vicjuan.org/images/technorati.png" alt="technorati" title="Search Technorati for links to this post." /></a>
    9. <a href="http://funp.com/pages/submit/add.php?&via=tools" title="貼到funP推推王"><img src="http://funp.com/images/tools/post_05.gif" border="0"/></a>

雖然我對版型還做了許多其他的修改
不過由於那些修改只需要靠plugin以及wp-widget就可以達成
就算更換theme也不受影響
所以就不在本文中紀錄
以後有時間在另外寫一篇吧

歷史上的今天...

Powered by

7 thoughts on “我在wordpress版型上添加的程式碼”

  1. Internet Explorer 6.0 Windows XP

    你好,有些事想請教,不知大大或其他高手能否賜教?

    我的 blog 都是自己胡來的,現在的問題是 banner 不漂亮,不懂怎樣把照片做一張不會變型的 banner,和「回應」部分的每篇回應分隔不清楚,請問我應該怎麼解決呢?我都不是電腦高手啊。:(

    先謝謝大大。

  2. Mozilla Firefox 2.0.0.3 Linux

    第一個問題
    我想要做一個不會變形的banner
    要訣就是去量自己的banner的長寬
    然後以photoshop等軟體將自己的照片材切成這樣的大小

    第二個問題
    如果你會css語法的話
    你可以將你版型中的comments-post這個div元素給予背景顏色
    應該就可以將每篇回應分離出來了

  3. Internet Explorer 6.0 Windows XP

    很感謝你到我的部落格留言耶,你真是一個好人!果然是好人好站!

    但我不懂css語法,怎麼辦呢?我找不到”Comments-post”這項喔。謝謝你的幫忙。

    BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #9fff7f
    }
    A {
    TEXT-DECORATION: underline
    }
    A:hover {
    COLOR: #cc0099; TEXT-DECORATION: underline
    }
    #container1 {
    FONT-SIZE: small; BACKGROUND-IMAGE: none; MARGIN: 0px auto; WIDTH: 900px; FONT-FAMILY: Bookman Old Style; BACKGROUND-COLOR: #ffffff
    }
    #banner {
    FONT-WEIGHT: bold; FONT-SIZE: large; BACKGROUND: url(http://pic14.pic.wretch.cc/photos/31/d/dolphinrita/2/1393348760.jpg) #ffffff right center; COLOR: #ffffff; BORDER-TOP-STYLE: none; TEXT-INDENT: 30px; FONT-STYLE: normal; FONT-FAMILY: Bookman Old Style; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 140px; TEXT-ALIGN: left; BORDER-BOTTOM-STYLE: none
    }
    #main2 {

    }
    #content {
    FLOAT: left; WIDTH: 70%
    }
    #links {
    BACKGROUND-POSITION: 0% 0%; MARGIN: 0px 0px 0px 74.5%; WIDTH: 25%; COLOR: #bf4f4f; BACKGROUND-COLOR: #ffcccc; TEXT-ALIGN: left
    }
    #divThird {
    maxwidth:
    }
    #footer {
    CLEAR: both; BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #ffffff
    }
    .side {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; COLOR: #bf2f2f; BORDER-TOP-STYLE: none; BORDER-TOP-COLOR: #ff6633; PADDING-TOP: 5px
    }
    H1 {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px
    }
    .blogbody {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px
    }
    #banner A {
    BACKGROUND-POSITION: center center; FONT-WEIGHT: bolder; FONT-SIZE: x-large; VERTICAL-ALIGN: super; COLOR: #ff9999; TEXT-INDENT: 30px; LINE-HEIGHT: 120%; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: 新細明體; POSITION: static; TOP: 20px; HEIGHT: 300px; TEXT-ALIGN: left; TEXT-DECORATION: none
    }
    .calendar {
    FONT-SIZE: x-small; COLOR: #6ad46a; FONT-FAMILY: Bookman Old Style
    }
    .calendar TABLE {
    FONT-SIZE: medium; COLOR: #afbfaf
    }
    .calendarhead {
    COLOR: #58d458
    }
    .calendarhead A {
    FONT-SIZE: small; COLOR: #e91313
    }
    .calendar A {
    FONT-WEIGHT: bold; FONT-SIZE: small; COLOR: #2aaa2a
    }
    .calendar TABLE TBODY TR TD {

    }
    .sidetitle {
    FONT-WEIGHT: bold; COLOR: #cc3366; BACKGROUND-COLOR: #ff9999; BORDER-BOTTOM-STYLE: none
    }
    #blogCategory A {

    }
    .boxMySpaceImg {

    }
    #blogCategory {

    }
    #blogCategory SPAN {

    }
    #service {

    }
    .powered {

    }
    .calendar TABLE TBODY {
    COLOR: #8daa8d
    }
    .title {
    FONT-WEIGHT: bold; FONT-SIZE: large; COLOR: #006600
    }
    .innertext {
    COLOR: #009933
    }
    .articletext {
    BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #cc3333; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
    }
    .description {
    FONT-WEIGHT: bold; FONT-SIZE: small; COLOR: #ffffff; FONT-STYLE: normal
    }
    #banner A:hover {
    FONT-SIZE: x-large; COLOR: #ff9999
    }
    .date {
    FONT-WEIGHT: bold; FONT-SIZE: small; COLOR: #ff9900
    }
    .posted {
    BORDER-TOP-WIDTH: thick; BORDER-TOP-COLOR: #ff9933; BORDER-BOTTOM: #ff6633 thick dotted; BORDER-LEFT-STYLE: none
    }
    #banner A:link {
    FONT-SIZE: x-large; COLOR: #ff9999
    }
    #banner A:visited {
    FONT-SIZE: x-large; COLOR: #ff9999
    }
    #banner A:active {
    FONT-SIZE: x-large; COLOR: #ff9999
    }

  4. Internet Explorer 6.0 Windows XP

    你好:

    很感謝你到我的部落格留言啊,你真是一個好人!果然是好人好站!

    我只有photoimpact,沒 photoshop 喔。裁剪照片,是真的用間尺在螢幕上量度出大小再用軟件裁剪嗎?

    我不懂CSS語法,怎麼辦呢?我亦找不到 “comments-post” 這一項喔,是不是出了問題?

    很感謝你的幫忙!

    我已傳了電郵給你,請你在電郵解答吧,敬請你看看,謝謝你。

    Rita

    Rita

  5. Mozilla Firefox 2.0.0.3 Linux

    photoimpact也是可以辦到的
    我只是有點懶的全列出來而已 XD
    不過拿尺量螢幕並不理想
    因為螢幕是以像素作為大小單位的
    因此我建議安裝firefox的套件”MeasureIt”
    這個套件可以在螢幕上拖拉出一個長方形
    必且顯示這個長方形的長寬
    透過這個方式就可以知道你的banner的長寬是多少像素了

    另外CSS檔案中沒有comments-post應該是正常的
    因為如果本來就有
    你就不會有回應之間分隔不清的問題了
    所以你只需要自己添加進去就好
    .comments-post {BACKGROUND-COLOR: #cccccc;}
    像這樣
    當然顏色是可以自行更換的

發表迴響