Entries by teach

WordPress主題教學 (六)- 製作個人履歷網站Part 2

在閱讀Wordpress主題教學 (六)- 製作個人履歷網站Part 2前,請先參閱Part 1文章: WordPress主題安裝 (五)- 製作個人履歷網站Part 1 我們在看這個theme的Demo網站時會發現,主頁除了內容,下面還有三個作品展示。 在後台,我們發現左手面多了一項Portfolio。很明顯,在這我們可以在這新增我們的作品。 你也會發現,Portfolio和普通的Post非常相似。其實它們叫做Custom Post Type,是Post的一種,但是用來儲存其他東西,像今次這個例子,我們用它來儲存我們的作品。 先隨便新增三個作品吧。記得填寫標題,內容和Featured Image。 看見Options這個白色格格沒有?是否感覺很陌生?這是正常的,他就是我之前說過的Meta box。他們也是隨着不同的theme而出現。像這個例子,大概是讓你對這個特定的Portfolio作出設置。 現在我們建立其他頁面吧。新增一頁叫Work,Template選擇Portfolio,內容留空便可以。 看!當我們在Page Template選擇了Portfolio後,建立出來的頁面會自動顯示你的作品。 同樣的道理,也應用在Blog和Contact頁面上。新建一頁叫Blog和Contact,Template分別選擇 Blog和Contact Page。大家可以去View Page看看。 然後建立Menu,把剛剛做的Page都加上去。Theme location記得要剔 Top Menu。 然後到Settings-> Reading設定主頁。 到Settings->General輸入Site Title和Tagline。 最後設置Widget,分別是Left/Middle/Right Footer,便大功告成了! 到主頁Refresh,看看我們做的一切改動。其實當你做完以上每個步驟,都應該到相應的頁面Refresh,看看結果。 排解疑難 有時候,我們做了某一處的更新,但到相應的頁面refresh卻出現錯誤或沒有顯示應有的改變,我們有以下兩個對策: 1. 到相應的頁面按Update。有時候例如你加了一個Footer Widget,但你Refresh主頁時卻沒有顯示出來,你可以到Page找到你的主頁並按Update。 2. 到Settings->Permalinks,選擇你的連結結構並按Save。 成果: Homepage。 Work。 Blog (會自動拿取你的Post) 。 Contact。 (當有人填了這份form,系統會email給你。這個接收電郵可在Settings->General更改) 最後,你可能會問最上的那條黑色admin bar怎樣除掉。其實只要你登出這個Admin帳號,它便會消失了。 就這樣我們就完成了一個個人履歷網站!

WordPress主題安裝 (五)- 製作個人履歷網站Part 1

請先參閱:網頁設計教學 - WordPress架站全攻略2016 (不斷更新…) Theme掌管了一個Wordpress網站的外觀。透過安裝不同的Theme,我們可以輕易地製作各種專業的網站。我們將小試牛刀,建立一個個人履歷網站。 在這篇文章,我們會學習到: - 利用Wordpress theme建立網站的操作流程 - 辦認Wordpress theme文件,Wordpress主題安裝的重點 - WordPress Theme入面的Option Panel概念 - Custom Post Type介紹 - 頁面出現錯誤或沒有顯示應有改變時的兩個對策 - 利用theme wpstanley去建立一個個人履歷網站 Theme掌管了一個Wordpress網站的外觀。透過安裝不同的Theme,我們可以輕易地製作出不同的網頁。 Theme也有分免費和付費的。通常付費的功能比較齊全,外觀也更專業,以及更多選擇。但由於我不想大家再付費,因此接下來幾天我們只會用一些免費的Theme做實戰。 至於如何搜尋這些Theme,以及當中要注意的事項,我會在其他文章詳述。 而今天我們會使用一個免費的個人履歷Theme - wpstanley。 大家可在: http://gentsthemes.com/themes/stanleywp-twitter-bootstrap-wordpress-theme/ 下載這個theme。 我們在以上的連結按demo,先看看利用這Theme會做出甚麼的網頁吧: 辦認theme文件 無論是付費或是免費,我們下載回來的wordpress theme通常有數個文件,包括: - 主要theme文件 - Documentation (教你如何使用這個theme) - Demo Data(通常是一個xml文件。我們安裝了一個theme後,如果想把它變成和Demo Site一模一樣的話便要上載這文件,這個文件會包括theme以外的其他資料,例如Page,Post 和Menu等等) 我們解壓屬下載回來的文件 StanleyWP-Package.zip 後會得出兩個文件: - Documentation.zip - stanleywp.zip […]

WordPress架站(四)- Users,Widgets,General Settings,Themes,Plugins,設定首頁

今天,我們會繼續學習Wordpress其他常用的功能。 在這篇文章,我們會學習到: - WordPress 架站基礎 :Users,Widgets,General Settings,Themes,Plugins,設定首頁 - 利用初始theme:TwentyFifteen建立簡單的部落客 Users 原來,Wordpress已經內建了一個用家管理系統。如果你到Users -> All Users便可以看見。正常應該就只有你一個用家,就是你用來登入後台的管理員帳號。你也可以到Your Profile去重新設定關於你的資料,密碼等等。 一個簡單的網頁,我們並不需要利用到這個用家管理系統。但如果你的網頁可以開放給用戶注冊,你便可以借助這個系統,管理你的用戶。 Themes Themes的中文是叫主題。到Appearance->Theme便會看到。基本上它掌管了你網站的外觀。現在的主題越來越利害,除了外觀外他還可能掌管了某些特別的功能,對網頁的設置等等。如上圖所見,我們現在用的主題是叫Twenty Fifteen。我們將會在後面的章節,對關於尋找及安裝主題有更深入的研究。 Plugins Plugins的作用在於替原來的網站擴建更多的功能,例如替網站擴建電子商務功能等等。程式設計師可以自由地設計及上載自己的Plugins供其他人下載,為Wordpress帶來許多不同的擴充功能。我們可以到Plugins->Installed Plugins看看現在安裝及運行了哪些Plugins。大家可以在右上角尋找一些Plugins。要注意的是即時你安裝了一個Plugin,你必須activate它才能夠運行。 General Settings 大家請到 Settings-> General。在這裏我們可以對網站誰行一些基本設置。比較重要的是Site Title和Tagline。在Site Title請輸入你網站的名字,例如你再替ABC Flower製作網站,你便需要填ABC Flower。而Tagline則要用一句句子去總括你的網站。這兩個位置非常重要,如果你想別人在搜索引擎輸入你網站的名字時就找到你的網站,請務必填寫。 另外一個比較值得留意的位置是Settings->Reading。 看見了第一行Front Page Display了沒有?從這裏我們可以設置主頁是甚麼。初次設定主頁是Your Latest Post的。如果你想把Page 裏邊其中一頁設定成主頁,你選擇 A static page,然後在Front Page選擇你想設置為首頁的頁面便可以。 Setting->Permalinks我們也很常用。現在我們每一個Page和Post的網址都是以類似?p=123為結尾,不太好看。我們可以在這裏選擇Post Name,那麼以後你的連結會以文章的標題作為網址了。 我們通常會選擇Post Name,來增加每個網址的可閱讀性。 Widgets Widgets是網站的一小片位置,我們可以隨意在這片位置上加上我們需要的東西,通常應用於一個網頁Sidebar(側欄)或者Footer(網頁最底部的位置,通常每頁都會出現)上。 我們到Appearance->Widget。根據不同的主題,他們可能提供不同的位置給我們放Widget。在這個主題,只有一個位置可以給我們放Widget:如上圖它他叫做Widget Area。而它上面寫着Add widget here to appear in […]

WordPress入門(三)- 基本操作 – Post,Menu

前文提要:WordPress教學(二)- 基本操作 – Page 在這篇文章,我們會學習到: - WordPress入門基本功 : Post,Menu Post 我們不時看見一些網頁,都會有一個部份是news(新聞),blog(部落客)等等。這些東西我們在Wordpress叫Post。 Post和Page其實非常相似,像Page一樣,每一個Post都有一個獨立的網址。他們不同之處,就是每一個Post的介面是一模一樣的。而Page則不同,我們可以選擇利用不同的Page Template令每一個Page介面不一樣。 Post的另外一個特點,就是我們可以把他們歸類(Category)。 如上圖,這兩則新聞有不同的網址和內容,但介面一模一樣。 現在我們試試去新增一個Post。按Post -> Add New,其他的基本上和Page一模一樣。 我們更可以把它們歸類。到All Post -> Categories。 隨便新增一些Category。在Name 輸入後按Add New Category 便可。 然後我們回到講講新建的My First Post。 在低一點的位置,剔下這個Post的Category便可以。 Menu 一個網站, 除非只有一頁,不然的話一定會有一個主要導航(Navigation)。他們會出現在網站的每一頁上,目的是供用家可以隨時去看站內的其他內容。 在這個網站,Store, Mac, iPad, iPhone, Watch, Music, Support便是這個網站的主要導航了。 然而,在網站的最底部也有另一個導航。他們可能是比較沒有那麼重要的頁面。 這些導航,在Wordpress我們叫Menu。 到Appearance -> Menus 輸入一個Menu名稱,按Create Menu 在左手邊我們可以選擇一些想加進這Menu的Page,然後按Add to Menu。你也可以選擇Custom Links,加進自己想要去的連結。 一個網站可能在很多位置都可以有Menu。而在這個主題有兩個位置可以放Menu:一個叫Primary Menu,而另外一個叫Social […]

WordPress教程(二)- 基本操作 – Page

今天我們開始學習使用Wordpress來製作網頁。我們先要去熟習一下Wordpress的基本操作。 在這篇文章,我們會學習到: - WordPress 基本功 : Page - 熟習Wordpress基本操作 恭喜你!最沉悶的一部分 - 前期的設置及安裝工作已經做好了!(詳情請看:WordPress教學(一) - 購買網址,伺服器和安裝WordPress)接下來我們便學習如何使用Wordpress來製作網頁!今天的這wordpress教程會學習1個概念 - Page 簡介 如果你的網址是xxx.com 那麼你的Wordpress後台地址便是xxx.com/wp-admin 所謂的後台,就是只有網頁管理員(就是你)才可以進入的地方。Wordpress的後台可以管理整個網站,例如其內容,外觀,甚至各種不同的功能等等。 熟習Wordpress 在上一篇教程的尾段我們已成功地登入後台。現在大家請開兩個瀏覽器,一個是你的網址,一個是你的後台: Page 在左手邊是這個後台的主要菜單,首先第一個要學習的概念是Page。 Page用來管理一個網站的每一個內頁。所謂『每一個內頁』 就是他們都有一個自己獨立的網址。例如一個網站的主頁是: xxx.com 在這個網址下,除了主頁,還會有很多其他不同的內頁,例如: xxx.com/about-us xxx.com/faq xxxx.com/contact 從以上可見,每一個內頁都有一個獨立的網址,而這個網址都是在主網址下的。任何人只要在瀏覽器上輸入這個網址,便能去到相應的頁面。 但要留意一點,就是這些頁面並不一定可以讓用家在主頁上找到。如果我們想讓這些頁面在主頁上或在每一頁上都能被人連結到,我們需要把他們放在Menu上(一會講述)。 按下All Page,我們可以看見現時只有一頁,叫Sample Page。 我們可以按New Page來新增一頁。第一項我們可以填的是標題,我們輸入了 My first page。 而內文我們則填Hello。最後按Publish。 我們按下View Page(在標題下面)(請用按右鍵->在新分頁開啟),就可以看見我們剛剛創造的一個連結為 xxx.com/my-first-page的頁。 Permalink在Wordpress就是表示網址連結的意思。 回到後台。我們按下’Toolbar Toggle’後發現多了很多選擇: 例如可以設定字體顏色,粗體,斜體,使用h1-h6或p標籤等等。 使用h1-h6或p標籤 按下更可以為文字新增連結。 在這個內文編輯器,如果我們按下Text,我們可以直接編輯HTML。 延伸閱讀:基礎HTML教學 如又按下Visual,則會變回原來的模樣- 經瀏覽器演繹後的樣子。 […]

LF2之父小熊專訪 - 香港獨立遊戲開發者的血與淚

為了夢想,你可以走多遠? 獨立遊戲開發者(Indie game developer)的路,尤其在香港從不易走。曾在2000年代紅極一時,超過2000萬人下載的電腦遊戲 - 小朋友齊來打交系列 (Little Fighter)的開發者小熊,是香港為數不多的獨立遊戲開發者。 他剛剛發布了新的手機遊戲 - 英雄大作戰X (Hero Fighter X)。 「在香港要創新很難,因為機會成本太高。現在許多開發商,都是抄襲外國成功的遊戲。而我的夢想,是創造一隻結合中國歷史,格鬥和即時戰略的遊戲,並把它由香港帶到全世界。」 無心插柳,瘋靡全港 在2000年代初,我們不難看見在各大網吧,甚至是學校的電腦室,幾個學生擠在一部電腦面前。一個鍵盤放着八隻手,螢幕上各種角色在互相廝殺。「小朋友齊來打交」,曾經在香港紅極一時,原來它只是小熊無心插柳之作。小朋友齊來打交第一代是小熊在中五時寫出來的。後來他在中大讀書,和宿舍的室友也很愛打機,於是一起開發了第二代。順便用裡面的遊戲引擎來做FYP(畢業年專案)。最後遊戲很成功,有超過二千萬下載,而FYP也順利攞到A。 LF2 Henry的設計草圖 由於遊戲是免費,遊戲的成功並沒有為小熊帶來什麼的收入。畢業後小熊到公司打工。工作數年,卻難掩心中對遊戲的熱愛。在零八年他把心一橫,放棄在微軟的工作,全心投入遊戲開發,成為香港為數不多的獨立遊戲開發者,並開發出「英雄大作戰(Hero Fighter)」。「那時候我給自己一個兩年的期限,如果在兩年內我沒有做出什麼成績,便放棄走這條路。想不到一做便是七年,做到現在了。」小熊苦笑。 2002年,當時小熊辭職, 租用了工廠大廈一個書桌, 一邊做 Freelance 一邊做LF2 憑著熱情,不屈不撓 沒有穩定收入,沒有團隊,只有一個人在家裏獨自做開發。這七年,一點也不容易走。小熊每天十點起床,一做便是做到凌晨二,三點,星期一至日也在工作。因為只有一個人,從人物設計,圖像設計,遊戲開發,調試,影片剪接等等全是小熊一個人包辦。「我覺得自己在這創業路上好像一隻烏龜,走得很慢很慢,好像沒有什麼出路卻還不放棄,全憑一股傻勁堅持到現在。」 大概在09 到 10 年,電腦板的英雄大作戰面世,為小熊帶來一些收入。只是好景不常,遊戲很快便被中國破解團隊破解了,能讓玩家免費任玩。收入頓時變成零,小熊坦言心情直跌落谷底。 「那時候我足足沮喪了兩年,成個人變得好摺,在家裏不想外出和人溝通。」 「還記得有一次我看見一本雜誌在介紹我的遊戲,我興高采烈地翻開,怎料第一頁便是教人如何破解我的遊戲,免費下載來玩,讓我感到很心酸。」 「係香港做Indie(獨立遊戲開發者)其實好慘,好多時別人會覺得你不腳踏實地,見工時公司甚至會不把它當成經驗,還會壓低你人工,覺得自己請你是在拯救你。反而在外國,Indie的經驗會受到尊重,即使你創業失敗的代價在外國也會低一點。」 堅持信念,盡地一擊 兩年前,小熊把心一橫,決定為遊戲推出手機版,作最後嘗試。英雄大作戰X剛在本月初上架,短短三星期已有超過60萬人下載。雖然付費玩家並不多,但卻給了小熊信心和希望。 「現時在國內和香港的遊戲,大都參照外國成功的遊戲,改改圖畫於短時間內發行,埋沒了許多原創idea。我的夢想,則是創造一隻結合中國歷史,格鬥和即時戰略的遊戲,並把它由香港帶到全世界。」 現在做 HFX 時的書桌 有人認為小熊很厲害,可以自己開發出這麼多東西,究竟他是如何學會的呢? 「以前小學就俾媽咪迫去學電腦。中學時期我哥哥買了一部電腦回家,那時候我打開小學時得到的教學磁碟,發現有很多小遊戲,我就愛看那些遊戲的源碼,然後慢慢就寫出自己的遊戲。如果大家對編程或遊戲開發有興趣,可先去學JAVA,學習基本的編程概念,然後可到UNITY 看看一些遊戲範例,學習別人怎樣寫。」 延伸閱讀/資源: JAVA - 甲骨文公司:https://www.oracle.com/java/index.html UNITY - 遊戲範例:https://unity3d.com/learn/resources/downloads 網頁設計課程 - 鬍子科技學院: http://mtache.com […]