| 月 | 日 | 年 | 時 | 分 |
28 /
Wed |
|
| 07 | 08 | 09 | 00 | 55 | 參 |
| WP筆記-custom theme 速成 |
![]() |
![]() |
|||
![]() |
![]() |

要改 WP? 其實不難, 以下是訣竅:
運用版型元件拼出主要頁面,
附屬元件輔助完成頁面功能.
共用串接樣式劃分定位板型,
裝附加元件增加部落格能力.
-
-
-


images from : http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/ (好文)
設計定位(簡單的改法改這裡就好)
style.css
前面這些會影響到在 theme 選擇的時候的界面
/*
THEME NAME: MyCoolTheme
THEME URI: http://www.website.com/
DESCRIPTION: A clean and elegant Sandbox theme for Wordpress based on the classic font – Helvetica Neue. Features a color options page, automatically pulled post thumbnail images(no need for custom fields).
VERSION: 1.0.9
AUTHOR: John Doe
AUTHOR URI: http://www.johndoe.com/
TAGS: simple, two column, widget ready, gravatar support, theme options, magazine, right sidebar, fixed width, helvetica, yellow.
.
This work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Please leave the footer links in tact. THANKS!
.
*/
screenshot.png -> 則可以改預覽圖示
版型元件 (這些檔都不完整,所有頁面都 share 這些版型元素)
header.php – 頁頭
generate css,javascript 位置, Logo, Top Banner 等等
利用 bloginfo 弄出header需要的資料
<?php bloginfo(‘name’); ?>
sidebar.php – 功能 bar (widget 可以放的地方)
根據編號生出 sidebar
<?php if ( !function_exists(‘dynamic_sidebar’)
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
footer.php – 頁尾 (credit, 版權聲明等等)
主要頁面 (這些頁面是完整的, 由版型元件組合而成)
index.php – 首頁
single.php – 單筆完整 post 內容頁面 (包括 comments )
archive.php – 日期頁面(多筆)
page.php – Page 頁面
search.php – 搜尋結果頁面
custem.php – 自定頁面 (admin>Page 裡面可選板型)
前面加上<?php /* Template Name: testTemplate */ ?>在 wp-admin 會自動變出 testTemplate 版型以供選擇
附屬元件 (部分頁面 / 元件 會需要以下元素)
archives.php – 過去月份的 List
links.php – generate admin 裡面的 links
comments.php – generate comment form 與顯示 comments
functions.php – 可呼叫的 function 在這
有幾個 sidebar 可在此控制
<?php register_sidebars( $number, $args ); ?>
重要資訊
xampp mysql
username: root
password:”"
wp-config.php example:
define(‘DB_NAME’, ‘wordpress’);
/** MySQL database username */
define(‘DB_USER’, ‘root’);
/** MySQL database password 內定空白,這邊的設定可以到 phpMyAdmin 裡面的 mysql>usr裡面去改,MD5加密,可以去找網站加密倒貼回去 */
define(‘DB_PASSWORD’, ”);
/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);
/** Database Charset to use in creating database tables. */
define(‘DB_CHARSET’, ‘utf8′);
/** The Database Collate type. Don’t change this if in doubt. */
define(‘DB_COLLATE’, ”);
Template Tag 參考 http://codex.wordpress.org/Template_Tags
Dynamic Content swf 放法:
1.swfobject.js 放到 theme/yourTheme/js
2.在 header.php 裡面
<header>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/swfobject.js”></script>
</header>
3.embed swf:
<script type=”text/javascript”>
var flashvars = {};
flashvars.aboutText = “<?php the_title(); ?>“;
var params = {};
params.menu = “false”;
params.wmode = “transparent”;
var attributes = {};
attributes.id = “myDynamicContent”;
attributes.name = “myDynamicContent”;
swfobject.embedSWF(“<?php bloginfo(‘template_url’); ?>/swf/logo.swf” ,”logo“, “300″, “400″, “9.0.0″, “expressInstall.swf”, flashvars, params, attributes);
</script>
這裡是真正flash會輸出的地方(div id要相同)
<div id= “logo“>
flash content will replace this.
</div>
4.swf 接收 flashvars (php generated)
var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (var keys:* in params) {
trace(key,String(params[keys]));
}
把 wp 的 function return 當作 xml 用
header.php (for example, embed 方法如上):
flashvars.aboutText = ‘<?php $menu = wp_page_menu(‘echo=0′);
echo str_replace(array(“\r”, “\n”, “\t”), ”, $menu); ?>’;
in fla:
var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
var t:String;
for (var keys:* in params) {
t+=String(params[keys]);
}
var wpData:XML = XML(t);
trace(wpData..a.length());
for (var i:* in wpData..a) {
trace(wpData..a[i] , wpData..@href[i]
}
Turn WP to a regular website (page based)
in Setting > Reading

把 Page 放到 Admin 的最前面(方便使用)
http://reciprocity.be/cms-menu/
安裝 樣板 plugin
http://www.whypad.com/posts/supple-forms-a-wordpress-cms-plugin/566/
iphone 到處寫

此外一些有用的資訊在第二頁(按下面)
















Leave a Message