iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 17

【Day 17】 教你wordpress加設作者名稱和時間

加設作者名稱

加設作者名稱頗為簡單,只需要透過wordpress的php編碼:<?php the_author_posts_link(); ?>,這樣就能夠完成了,至於放置的位置,因為我們希望每個文章都會出現,那麼當然就是放在loop內,而因為我們希望會再title之下,我們可以把放在card-title下方。

編碼:

<h3 class="card-title"><?php the_title();?></h3>
<p class="post-meta">Posted by <?php the_author_posts_link(); ?> </p>

我們加入了Posted by ,這樣當顯示出來時,我們就會在作者名前,見到 Posted by ,你也可以把它轉換成自己喜歡文字,這裡需要注意的是,你加入了任何的空格,亦會顯示出來

結果:

加入the_author_posts編碼後,若正常運作就會看到 Posted by(作者名字)

修改名稱方法:

大家可以到帳戶,個人資料,在暱稱、姓氏或名字裏,加入理想更改的名字,最後在如何顯示你的大名,選擇你想要的就可以了。

在帳戶,個人資料裏,可修改名字

加設日期和時間

這裡有兩個方法,而兩個方法分別在於,前者可以透過wordpress admin來修改設定,後者則會在php裏,直接把格式定死,喜歡那種就看你自己需要吧,當然若是提供給用家使用,當然還是建議方案一

方法一(日期部分)

編碼部分

我們首先需要在剛才作者名稱的連結後,加入編碼on <?php the_time(get_option('date_format')); ?,這樣子基本上就完成編碼的部分

編碼概覽:

<h3 class="card-title"><?php the_title();?></h3>
<p class="post-meta">Posted by <?php the_author_posts_link(); ?> on <?php the_time(get_option('date_format'));
</p>

編碼解釋:

<?php the_time的部分是要來利用worpdress系統,控制著時間的樣式,無論你是採用方法一或方法二,都會採用到。

get_option('date_format')則是要來連接wordpress後台用的,透過這樣就能夠令wordpress知道,這裡是需要到wordpress後臺的date_format位置,拿出用戶設定了的日期樣式

on : 和Post by 用意相同

小貼士:

假若不想和同一行,也可以開一個新的<p></p>來吧日子包著,像這樣子:

<p class="post-time"> 
<?php the_time(get_option('date_format')); ?>
</p>

Class改一個能夠方便你之後使用的就可以了,例如post-time這樣。

Wordpress部分

雖說這裡通常都是由用家調整的,但因為內裡有部份概念是相同的,所以我們也把它說完吧。

我們打開自己的wordpress,然後點選設定、一般,接著你會看到日期格式的,這裡就是我們需要設定的地方。

如何設定wordpress的日期格式

你會注意到除了我們看習慣的2020-10-02這種格式外,它在右邊也顯示了Y-m-d這類,這些是什麼來的?其實它們是php的日期格式,只要我們知道這點,就可以在自訂裏弄出自己想要的日期格式了,這裡我篩選了些實用的日子格式給大家,而下方也有些組合給大家參考,讓大家可以更深入了解,該怎樣使用。

日子:

d: 假若是個位數,前方會有0,例如01,02這樣
j: 這個無論是不是個位,都不會有0,例如1,2這樣

星期:

D: 會顯示簡稱,例如:sun,wed 這樣
l: 和上方不同,這個不是簡稱,是完整的英文,例如:Sunday,Wednesday這樣
N: 用數字1-7來顯示,星期一會是1,星期二會是2,如此類推
w: 用數字0-6來顯示,星期天會是0,星期一會是1,如此類推


M: 會顯示簡稱,例如:Jan,Dec 這樣
F: 會顯示完整的,例如:January ,December 這樣
m: 假若是個位數,前方會有,例如01,02這樣
n: 無論是不是個位,都不會有0,例如1,2這樣


Y: 會顯示四個位,例如1999, 2020這樣
y: 會顯示兩個位,例如1999就會是99,2020就會是20

其他
S: 一般英文日期,在數子後,不是會有nd,th這些,例如2nd January這樣,透過S,就能夠加添了。

組合參考

英文日期

Wednesday 2nd January,2020 :l jS m,Y
Jan 2020 : M Y
January20,2020 : mj,Y

這裡大家應該會注意到一件事,就是空格和,,對於顯示出來的日期,有著極大的影響,只要你加入了空格/,在編碼裏,那麼日期也會跟著會顯示出空格/,。

注意:

英文日期只有當你在wordpress裏的網頁介面語言/網站語言裏,設定了英文,才能夠正常運作,不然會出現各種翻譯上的錯誤,例如你設定了香港中文版,那麼它就會出現30th 九月,2020,這個結果。

至於如何設定語言?我們點選設定,然後點選一般,然後你在裡頭就會看到網站語言的設定了,接著只要按照自己想要的語言就可以了。不過要留意的是,若語言設定了為英文,那麼內容概要的字數計算方法會有點不同,wordpress會又每個英文字為一個字,轉變成每個英文詞語為一個字,非常奇怪對吧-.-

中文日期

2020年7月3日 :Y年n月j日

這裡和英文日期的概念是相同的,不過這次不再是空格或者,,而是用年月日來把數字相隔開來,換句話說,您可以加入任何符號或英文字,來把數字隔開。

數字日期

17/3/2009 : j/n/Y
17-3-2020 : j-n-Y
2020-03-07 : Y-m-d
07/03/20: d-m-y

這裡就更明顯了,只要你加入任何符號進去,那麼它就會出現什麼符號。

看到這裡,應該大致上也是明白吧,是不是很簡單呢/images/emoticon/emoticon34.gif

方法一(時間部分)

編碼部分

我們首先需要在剛才日期的部份後,加入編碼 at <?php the_time(get_option('time_format')); ?>,

編碼概覽

<p class="post-meta">Posted by <?php the_author_posts_link(); ?> on <?php the_time(get_option('date_format')); ?> at <?php the_time(get_option('time_format')); ?> </p>

基本上編碼和Date的差別並不大,只是我們這裡,由date_format更改為time_format,來讓wordpress系統,去拿取用家,在wordpress使用者介面裡,對於時間的設定。

Wordpress部分

設定的位置就在日期下

日期下方,可以設定時間

和日期也是一樣,你會到右邊也是有H:i:s這些,我們看不懂意思的編碼,換句話說,這裏也是可以用php的來設定的。這裡也跟日期一樣,我也篩選了一些實用的時間格式給大家,而下方也有些組合給大家參考,讓大家可以更深入了解,該怎樣使用。

上下午

a : 出來的上下午,會為小楷,像am,pm這樣
A : 出來的上下午,會為大楷,像AM,PM這樣

不過當然,若你把語言設為中文,那麼你無論設定為小楷還是大楷,你看到的依然是上午和下午

小時

g: 12小時制,例如下午四點的話,就會是4:00這樣
h: 都是12小時制,但當在個位數時,就會有0,例如下午四點,就會是04:00
G :24小時制。例如16:00這樣
H :都是24小時制,但當在個位數時,就會有0,例如早上四點,就會是04:00

分鐘

i: 就像平常看到的分鐘一樣,不過注意的是,在個位數時,是會有0的,例如01分這樣。

s:就像平常看到的秒一樣,和分鐘一樣,在個位數時,也是有0的。

時區

e: 會為時區的全名,例如香港,就會是Asia/Hong_Kong
T: 會為時區的簡稱,例如香港,就會使HKT

組合參考

英文時間(需要把語言設定了英文,才能正常使用)

9:00 am : g:i a
9:00 AM : g:i A

和日子的原理也是一樣,需要任何符號或空格,只需要加進去就可以了。

中文時間(需要把語言設定了中文,才能使用)

上午9時50分50秒 :ag時i分s秒
下午8:45 : ag : i

數字時間(24小時制)

16:45:55 : G:i:s

大致上是這樣了,相信也不太難吧,接下來我們就來開始介紹第二種方法啦/images/emoticon/emoticon37.gif

方法二

假若上方的你能夠完全明白,那麼這部份其實並不難去理解,兩者原理基本上,可以說是一樣的,我們一起來看看吧。

日子的編碼例子:

<?php the_time('Y年n月j日'); ?>

你會發現其實就只是把get_option('date_format')部分,直接轉換成編碼,其他基本上也是一樣,分別不大,只需於注意,需要添加''來把編碼包裹著,就可以了。另外空格或符號等亦可像wordpress那樣添加。

例如這樣:

<?php the_time('M Y'); ?>

和第一個方法一是一樣,英文的也需要設定了英文作為語言,才能夠正常顯示,否則就會出現 九月2020這種結果。

時間的編碼例子:

<?php the_time('Y年n月j日 ag : i'); ?>

你沒看錯,用這個方法,有個很方便的地方,就是日子和時間是可以一起的。

/images/emoticon/emoticon34.gif


上一篇
[Day16]不會the_posts_pagination ? 看這邊就對了,讓新手的你也會很酷地去設定
下一篇
【Day18】讓你著手建立wordpress文章頁面及加設文章封面圖片
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言