web、wordpress、文字日記

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

7 則留言

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

Header

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

Footer

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


  2. google analytics的主程式
    這是google用來統計網站訪客資訊與流量的工具程式
  3. 創用CC的授權
    沒有實際上的功效
    純粹是宣告網站內容的使用授權方式


    Creative Commons License
    本網站所有內容係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
  4. SparkStats的條狀圖
    這個條狀圖可以顯示網站的post跟comments發表情形
    不過其實我只是把它當作裝飾品來使用
    因為我根本看不懂那張圖…

Main index, Archive, Search result

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

    www.flickr.com


  2. HEMIDEMI按鈕以及推推王按鈕
    用來讓讀者方便收藏書籤
    這段程式碼必須加在post loop之中
    才能讓每篇文章標題旁邊都出現按鈕


  3. technorati的blog reaction
    用來顯示連結到這篇文章的blog數量

    WP-PostViews Plus的文章閱讀次數
    這段程式碼必須要有安裝這支plugin才會起作用
  4. Pagebar的分頁
    這段程式碼也必須先安裝這支plugin才有用
    而且這段程式碼必須放在post loop之外

    ‘pages: ‘)); ?>

Single post

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

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

歷史上的今天...

Powered by

在〈我在wordpress版型上添加的程式碼〉中有 7 則留言

  1. 自動引用通知: 花水木 HANAMITSUKI
  2. Internet Explorer 6.0 Windows XP

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

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

    先謝謝大大。

    回覆
  3. Mozilla Firefox 2.0.0.3 Linux

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

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

    回覆
  4. 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
    }

    回覆
  5. Internet Explorer 6.0 Windows XP

    你好：

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

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

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

    很感謝你的幫忙！

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

    Rita

    Rita

    回覆
  6. Mozilla Firefox 2.0.0.3 Linux

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

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

    回覆

對 DolphinRita 發表迴響取消回覆