WordPress仿企業(yè)站實(shí)戰(zhàn)2:創(chuàng)建主題
時(shí)間:2023-04-24 05:24:01 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-04-24 05:24:01 來源:網(wǎng)站運(yùn)營
WordPress仿企業(yè)站實(shí)戰(zhàn)2:創(chuàng)建主題:
我們之前已經(jīng)教大家安裝好了WordPress,并且制作好了首頁的靜態(tài)頁面。這節(jié)課教大家創(chuàng)建主題,并且訪問WordPress網(wǎng)站首頁時(shí),展示目標(biāo)站點(diǎn)的首頁。
1、預(yù)先課程
- WordPress運(yùn)行php集成環(huán)境phpStudy安裝
- WordPress安裝
- WordPress仿企業(yè)站實(shí)戰(zhàn)1:獲取首頁靜態(tài)頁
2、準(zhǔn)備工具
這節(jié)課我們用了一個(gè)新的IDE,PhpStorm,大家也可以使用其他工具。
3、創(chuàng)建主題
啟動(dòng)phpStudy,并且在WordPress站點(diǎn)的主題目錄下創(chuàng)建主題citymark
4、把上節(jié)課準(zhǔn)備好的首頁靜態(tài)頁面的所有素材都復(fù)制到新創(chuàng)建的目錄citymark下。
5、通過phpStorm訪問該目錄
6、把index.html重命名為index.php,并且把css目錄下的style.css拖拽到根目錄下,并且在style.css最頂部添加主題信息
/*Theme Name: CityMarkTheme URI: https://www.waimaoduo.comDescription: CityMark ThemeAuthor: DavidAuthor URI: https://www.waimaoduo.comVersion: 1.0Tags: Waimaoduo*/
最后如下:
7、訪問WordPress站點(diǎn)的后臺(tái),我的是http://wordpress.local/wp-admin,在后臺(tái)啟用我們創(chuàng)建的CityMark主題
8、訪問網(wǎng)站首頁
9、修復(fù)路徑
在index.php中修復(fù)圖片、js和css的路徑,把style.css的路徑改為
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>
其他的樣式使用相對(duì)主題目錄的文件夾,比如
<link href="<?php bloginfo('template_url'); ?>/css/scrollbar.css" rel="stylesheet" type="text/css"/>
修改好后,如下:
10、訪問首頁,一切正常,也沒有錯(cuò)誤,大工告成!
11、代碼以及工具下載
鏈接:
https://pan.baidu.com/s/104k8a4UsNtnUKNfwtowZ2w 提取碼:tf9f
關(guān)鍵詞:創(chuàng)建,主題,實(shí)戰(zhàn),企業(yè)