HOMERSS 2.0RSS comments
sizeSMALLMEDIUMLARGEXTRA LARGE
home
time
28 / Wed
07 08 09 00 55
title WP筆記-custom theme 速成
title
言
類
論
別

要改 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

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://pods.uproot.us/

http://flutter.freshout.us/

http://www.whypad.com/posts/supple-forms-a-wordpress-cms-plugin/566/

iphone 到處寫

http://iphone.wordpress.org/

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


  • 恩... 1 Stars喔~ 2 Stars好! 3 Stars酷!! 4 Stars哇!!! 5 Stars (3 票, 平均: 5.00 / 5) << 請踴躍投票


    Leave a Message

    :) D: :( :D more »