สาระบัญ:รวม [แชร์แบบบ้านๆ] รวมสาระด้านการเขียน theme (http://www.thaiseoboard.com/index.php/topic,268218.msg3691375.html#msg3691375)
[แชร์แบบบ้านๆ] ตอนที่ 6 Wordpress Theme แรกของชีวิต Part 2
ตอนที่ 6.2 Header and Footer (http://www.thaiseoboard.com/index.php/topic,269334.msg3712301.html#msg3712301)
ตอนที่ 6.3 bloginfo() Function (http://www.thaiseoboard.com/index.php/topic,269334.msg3714338.html#msg3714338)
ตอนที่ 6.4 loop&Post&page (http://www.thaiseoboard.com/index.php/topic,269334.msg3716191.html#msg3716191)
ตอนที่ 6.5 Navigation (http://www.thaiseoboard.com/index.php/topic,269334.msg3718983.html#msg3718983)
ผมจะใช้theme ที่ง่ายก่อนเพื่อทำเป็นตัวอย่างนะครับ
หลังจากที่เพื่อนๆเข้าใจตัวอย่างแล้วก็ไปประยุคใช้เอานะครับ
ดาวโหลดรูปเพื่อใช้เป็นตัวอย่างนะครับ
source files (http://www.mediafire.com/?3s7c9g18g2lbgrx)
ไฟร์css นะครับ
ขั้นตอนแรก
จริงๆเราสามารถทำทุกอย่างให้อยู่ในไฟร์เดี่ยวได้แต่มันจะแก้ไขยากและทำงานลำบากด้วยดังนั้นจึงเป็นเรื่องทีดีถ้าเราใชชุดไฟร์มาตรฐานจากบทที่แล้วครับ
ก่อนอื่นเลย เราสร้างไฟร์ตามนี้ครับในโฟร์เดอร์ชื่อ theme ของเรา
index.php
single.php
page.php
comments.php
functions.php
header.php
footer.php
sidebar.php
style.css
หลังจากนั้นนำไปไว้ที่theme บนwp นะครับ
หลังจากนั้นเราต้องทำให้wp รู้จัก theme เราก่อนนะครับ
เริ่มด้วยใส่ code ตามนี้ลงไปใน style.css
/*
Theme Name: ชื่อtheme
Theme URI: urlของtheme
Description: รายระเอียดของtheme
Author: ผู้เขียน
Version: 1.0
Tags: tag ของเท็มเพจครับ
*/
หลังจากนั้นเราก็เข้าไปหลังบ้านของwp ครับ
ทีนี้ตัวtheme ของเราจะแสดงขึ้นให้เห็นในwp แล้วครับ
(http://www.picza.net/save/20120505vvIdvTEdvlvdvvx181417_sv1/pic/2012_05_05-050-20120505vvIdvTEdvlvdvvx181417.png) (http://www.picza.net/show.php?id=20120505vvIdvTEdvlvdvvx181417)
Thanks: ฝากรูป (http://www.picza.net)
เราก็กด activate ครับเพื่อเริ่มใช้งาน theme ที่เราทำครับ
ต่อข้างล่างนะครับ
รออ่านครับ.... :wanwan017:
:wanwan017: :wanwan017: :wanwan017:
มาติดตามจากภาคที่แล้วครับ บทความดีมากเลยครับ :wanwan020:
ต้องขอโทษด้วยที่มาตอช้าครับพอดีช่วงนี้วุ่นๆ พอสมควรเลยไม่ค่อยมีเวลาครับ
เอาละเรามาต่อกันเลยครับ
ผมขอใช้ html ของBlind Faith มาเป็นตัวอย่างนะครับ
สามารถดาวโหลดได้จาก
ดาวโหลดทีมตัวอย่าง (http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/download.zip)
เอาละเรามาต่อกันเลยครับ
เมื่อเราเปิด index.html ขึ้นมาจะมีcode แบบนี้นะครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<title>Blind Faith</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
</head>
<body class="home blog">
<div id="top-bar-tile">
<div id="top-bar-content">
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1>
<span class="slogan">Just Another Theme by Dan Walker</span>
<div id="search-box">
<form method="get" id="searchform" action="" >
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" />
</form>
</div><!-- search-box -->
</div><!-- top-bar-content -->
</div><!-- top-bar-tile -->
<div id="nav-bar-tile">
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div>
</div><!-- nav-bar-tile -->
<div id="wrapper">
<div id="content">
<div class="post">
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1>
<div class="post-details">
<div class="post-details-left">
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span>
</div>
<div class="post-details-right">
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p>
<p> <a href="#" class="more-link">Read More</a></p>
<div class="dots"></div>
</div><!-- post -->
<div id="only-page">No newer/older posts</div>
<div class="spacer"></div>
<div class="dots"></div>
<div id="footer">
Copyright © 2011 <a href="http://www.danwalker.com">Dan Walker</a><br />
Don't steal anything etc
</div>
</div><!-- content -->
<div id="sidebar">
<div class="sidebar-box">
<span class="sidebar-title">a bit about me</span>
<div class="dots"></div>
<div class="textwidget">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p>
</div>
</div>
<div class="sidebar-box">
<span class="sidebar-title">recent posts</span><div class="dots"></div>
<ul>
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li>
</ul>
</div>
</div><!-- sidebar -->
<div class="spacer"></div>
</div><!-- wrapper -->
</body>
</html>
ก่อนอื่นเราจะต้องรู้ก่อนว่ามันแบ่งส่วนของเว็บยังไงให้เข้ากับโครที่เราวางไว้
โดยเราจะแบ่งตามนี้นะครับ
(http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/1.png)
เมื่อเรารู้ส่วนที่เราจะแบ่งแล้วเราก็จะนำมันมาวางลงในphp นะครับ
า่วนแรกคือ header.php เราก็จะคัดลอกcode จาก html มาตามนี้ครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<title>Blind Faith</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
</head>
<body class="home blog">
<div id="top-bar-tile">
<div id="top-bar-content">
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1>
<span class="slogan">Just Another Theme by Dan Walker</span>
<div id="search-box">
<form method="get" id="searchform" action="" >
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" />
</form>
</div><!-- search-box -->
</div><!-- top-bar-content -->
</div><!-- top-bar-tile -->
<div id="nav-bar-tile">
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div>
</div><!-- nav-bar-tile -->
<div id="wrapper">
<div id="content">
ตามด้วยfooter.php ทำเหมือนกับheader ครับ
<div class="spacer"></div>
<div id="footer">
Copyright © 2011 Blind Faith by <a href="http://www.danwalker.com">Dan Walker</a><br />
</div>
</div><!-- content -->
<?php get_sidebar(); ?>
จากhtml จะเห็นว่าต่อจาก footer นั้นเป็นส่วนของsidebar ครับเราจึงใส่ค่าดึง sidebar.php มาครับด้วยคำสัง <?php get_sidebar(); ?>
หลังจากนั้นเราก็ลงส่วนของ sidebar ครับทำแบบเดี่ยวกับทั้ง2 แบบข้างบนเลยครับผม
<div id="sidebar">
<div class="sidebar-box">
<span class="sidebar-title">a bit about me</span>
<div class="dots"></div>
<div class="textwidget">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p>
</div>
</div>
<div class="sidebar-box">
<span class="sidebar-title">recent posts</span><div class="dots"></div>
<ul>
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li>
</ul>
</div>
</div><!-- sidebar -->
<div class="spacer"></div>
</div><!-- wrapper -->
</body>
</html>
ต่อมาเราก็จะไปที่ index.php ครับลงcode คำสั่งเรียก
header.php กับ footer.php มาครับ ในindex.php เราก็จะลงcode ตามนี้ครับ
<?php get_header(); ?>
<?php get_footer(); ?>
หลังจากนั้นเราไปดูที่หน้า wp ของเราครับจะได้รูปร่างหน้าตาออกมาเป็นแบบนี้ครับ
(http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/2.png)
สังเกตุว่าตอนนี้css จะไม่โดนดึงมาใช้นะครับ
ลงชื่อเก็บความรู้ก่อน หุๆๆ
มาลงชื่อเข้าห้องเรียนครับ กำลังสนใจอยากทำธีมเองอยู่เลยครับ
+1 ให้เลยครับ :wanwan003:
มาต่อครับ
การใช้ bloginfo() Function
เราจะใช้bloginfo() ในการดึงค่าต่างๆของwp มานะครับไม่ว้่จะเป็น blog name, description, stylesheet URL, stylesheet directory และอื่นๆอีกมากมาย
สามารถอ่าต่อได้จาก คู่มือ bloginfo() Function http://codex.wordpress.org/Function_Reference/bloginfo
เอาละเรามาทำต่อกันครับ
เรามาหาcode นี้ใน header.php ครับ
<link rel="stylesheet" href="reset.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
หลังจากนั้นเราจะทำการใช้bloginfo()ในการเรียกdirectoryของtheme มาครับ
จะได้โคทแบบนี้ครับ
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
หลังจากนั้นก็ทำในส่วนของtitle
ก่อนแก้
<title>Blind Faith</title>
แก้เป็นแบบนี้ครับ
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
แก้นวส่วนของ h1 ให้เป็นแบบนี้ครับ
<h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo('name'); ?></a></h1>
<span class="slogan"><?php bloginfo('description'); ?></span>
แล้วลองแสดงผลดูครับจได้รูปร่างหน้าตาแบบนี้นะครับ
(http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/3.png)
เจ๋งอะ เดียวผมจะอ่านตั้งแต่ต้นจนจบเลย
สุดยอดครับท่าน
:wanwan017:
ติดตามอ่าน เรื่อยๆครับ :wanwan017:
มาต่อกันอีกครับ
ตอนนี้เราก็ได้โครงร่างกันแล้วนะครับเราจะมาดูในเรื่องของloop ครับ
ในหน้าของindex wp นั้นจะมีloop อยู่ครับloop คือส่วนที่แสดงเนื้อหาครับผมในwp จะทำให้เราเขียนphpง่ายๆ เพื่อทำloop ครับ
ก่อนอื่นเรามาดูในhtml ก่อนครับ
<div class="post">
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1>
<div class="post-details">
<div class="post-details-left">
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span>
</div>
<div class="post-details-right">
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p>
<p> <a href="#" class="more-link">Read More</a></p>
<div class="dots"></div>
</div><!-- post -->
โดย functions ที่เราใช้เป็นพื้นฐานหลักๆจะมีตามนี้ครับ
the_title
the_tags
the_ID
the_category
the_date
the_content
สามรถอ่าเพิ่มเติมได้ที่นี้ครับ : http://codex.wordpress.org/Template_Tags#Post_tags
เราก็นำฟังชั่นมาใส่ตามที่เอาออกแบบไว้ครับที่นี้ใน index.php.ก็จะได้ออกมาเป็นแบบนี้นะครับ
<?php get_header(); ?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="post-details">
<div class="post-details-left">
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
</div>
</div>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<?php get_footer(); ?>
หลังจากนั้นใส่code นี้ไปข้างล่าง <?php get_header(); ?>
<?php if ( ! have_posts() ) : ?>
<h1>Not Found</h1>
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>
<?php endif; ?>
<?php while ( have_posts() ) : the_post(); ?>
และใว้ด้านบนของ <?php get_footer(); ?>
<?php endwhile; ?>
เพื่อทำให้เกิดการloop ขึ้นครับผม
ตอนนี้หน้าตาของเรา็จะออกมาเป็นแบบนี้แล้วครับ
(http://wptutsplus.s3.amazonaws.com/006_firstwptheme2/4.png)
เราจะเห็นว่าตอนนี้ มันแสดง loop ออกมาแล้วแต่ถ้าเรามีบทความหลายๆบทความwp จะยังไม่ตัดคำนะครับ
เราจึงต้องเพิ่มจำนวนการแสดงและปุ่มก่อนและหลังเพิ่มเข้าไปอีกครับฃ
เราจะได้ index.php ออกมาเป็นแบบนี้ครับ
<?php get_header(); ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<h1>Not Found</h1>
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>
<?php endif; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="post-details">
<div class="post-details-left">
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
</div>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<?php endwhile; ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div>
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div>
<?php else: ?>
<div id="only-page">No newer/older posts</div>
<?php endif; ?>
<div class="spacer"></div>
<?php get_footer(); ?>
Single Posts
ส่วนนี้เราจะแสดงในส่วนของPost นะครับจะมีเรื่องเวลา โพสและผู้เขียนเพิ่มเข้ามาครับ
single.phpจะออกมาเป็นแบบนี้ครับ
<?php get_header(); ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<h1>Not Found</h1>
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>
<?php endif; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="post-details">
<div class="post-details-left">
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span>
</div>
<div class="post-details-right">
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
</div>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<div class="spacer"></div>
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
<div class="spacer"></div>
<?php get_footer(); ?>
Page
ในส่วนของpage เราจะนำเวลาและผู้เขียนออกนะครับ
ก็จะได้ออกมาเป็นแบบนี้ครับสำหรับ page.php
<?php get_header(); ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<h1>Not Found</h1>
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p>
<?php endif; ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>
<?php the_content('Read More'); ?>
<?php endif; ?>
<div class="dots"></div>
</div><!-- post -->
<div class="spacer"></div>
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
<div class="spacer"></div>
<?php get_footer(); ?>
เดี่ยวมาต่อครับ
:wanwan017: :wanwan017: :wanwan017:
น้ำใจงามจริงๆ ครับ :wanwan017:
ได้ความรู้มากเลยครับ :wanwan017:
อยากลองทำเองดูเหมือนกันแต่ไม่มีความรู้ด้านนี้เลย สงสัยต้องลองทำดูละ
เข้าสู่หัวใจของการทำธีม wp แล้ว เดี๋ยวไล่อ่านก่อนครับ ขอบคุณครับบบ :wanwan017:
เก็บไว้ก่อน ง่วงนอนมากๆ ครับ บทความดีมากๆ ครับ อ่านแล้วอยากทำตามที่ท่านสอนเลย เยี่ยมๆ :wanwan017: :wanwan017: :wanwan017:
ลงชื่อไว้ด้วยครับ :wanwan020:
เยี่ยมมาก :wanwan017:
+1 ขอบคุณมาก ๆ ครับ เดี๋ยวขอไล่อ่านตั้งแต่กระทู้แรกก่อน
เยี่ยมเลยครับ เก็บไว้อ่านเรียบร้อย เห็นพี่พีระพงษ์เค้าประสบความสำเร็วแล้วอยากทำได้บ้าง
ขอบคุณมากๆ ครับ น้ำใจงามจริงๆ :wanwan017:
ขอบคุณมาเลยครับ
เขียนได้แจ่มมาก5ดาว รออ่านต่อครับ +1 :wanwan017:
ตอนสุดท้ายของ Part นี้ครับ
Navigation
นำส่วนตรงนี้ไปใส่ใน Header.php ครับ
<div id="nav-bar-tile">
<?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
</div><!-- nav-bar-tile --> ผมของอธิบาย wp_nav_menu function :
menu – ชื่อmenu ที่ต้องการ
menu_class – กำหนด class ที่ เราจะใช้จาก css
menu_id – กำหนด id ของ <ul>
theme_location – ตำแหน่งของการเรียก menu ในตอนแก้theme เดียวไว้มาขยายความตอนที่3 ครับ
show_home – แสดงหรือไม่แสดงlink ของหน้าแรก
หลังจากนั้นเราก็เพิ่มส่วนของตรงนี้เข้าไป ในfunctions.php นะครับ
<?php
add_theme_support('nav-menus');
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
)
);
}
add_theme_support('post-thumbnails');
?>ที่นี้เราก็จะสามรถแก้menu ได้แล้วครับ ไว้เจอกัน Part 3 ครับ :wanwan003:
<div มันเยอะแยะไปหมด มีวิธีจัดการ div ให้สัมพันธ์กับ css แบบง่ายๆบ้างมั๊ยครับ :-[
ขอบคุณครับ ได้ความรู้มากเลยครับ
ได้ความรู้เพิ่มอีกแล้ว :wanwan017:
อ้างถึงจาก: kookcoo ใน 18 พฤษภาคม 2012, 22:20:55
<div มันเยอะแยะไปหมด มีวิธีจัดการ div ให้สัมพันธ์กับ css แบบง่ายๆบ้างมั๊ยครับ :-[
แนะนำให้หใช้ program Sublim text 2 ช่วยครับ
แล้วเวลาเราเขียนเราก็ Tab ช่วยจะทำให้ดูง่ายขึ้นครับจะได้ไม่งง ครับผม
http://www.thaiseoboard.com/index.php/topic,268595.0.html
ขอบคุณมากๆครับ ได้ความรู้มากมาย :wanwan031:
เข้ามาเก็บความรู้ ขอบคุณครับ :wanwan017:
ตามมาเก็บความรู้ครับ :wanwan003: :wanwan003:
ได้ความรู้มากมายครับ
ว้าวๆ ขอบคุณครับ :wanwan020:
ขอบคุณมากครับ :wanwan017: