• บทเรียน wordpress

    April 13, 2018

    1.ลง wordpress
    1.1 manual ดาวน์โหลดไฟล์ อัพขึ้นโฮสต์ install
    1.2 script auto ของ hosting
    2. plugin ของ wordpress
    – backup
    – language
    – wptuch
    – เปลี่ยนธีมตาม category
    – amp
    —————–
    WORDPRESS THEME STRUCTURE
    index.php
    header.php
    footer.php
    functions.php
    style.css
    taq.php
    single.php
    search.php
    page.php
    post.php
    404.php
    category.php
    achives.pgp

    wp-hierarchy.png (2862×1504)

    —————–
    – การใช้งาน localhost => Xampp
    – การสร้างธีม
    – สร้าง child theme
    – ปรับแต่ง css
    – การสร้าง widget
    – การ Modify ธีม wordpress
    – การ Hack Theme (เข้ารหัส หรือ ส่งค่า active ฯลฯ)
    – เปลียนหน้าแรก index.php ใช้แค่ไฟล์เดียว (ลบ header.php ,footer.php,sidebar.php)
    – code ใช้ดึงบทความ รูป ฯลฯ
    – code สุ่มบทความ
    – การสร้าง page template
    – ทำเว็บ 2 ภาษา
    – ปรับแต่ง SEO

    header.php

    – Banner, logo ,ใส่ code การเริ่มต้นของ Page ด้วย เช่น title head meta language stylesheet

    <!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title>
if ( $site_description && ( is_home() || is_front_page() ) )
echo ” | $site_description”;
</title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />

    index.php

    หน้าหลัก wordpress , ใช้เก็บ Code ดึงการแสดงผล จากหน้าต่างๆ สำหรับหน้าแรก เช่น
    get_header();
    get_template_part( ‘loop’, ‘index’ );
    get_sidebar();
    get_footer();

    sidebar.php

    แสดงผลเมนูด้านข้าง ,widget ,อืนๆ
    get_search_form();
    wp_get_archives( ‘type=monthly’ );
    wp_register();
    dynamic_sidebar( ‘secondary-widget-area’ );

    single.php

    หน้าแสดง Post หรือ บทความเต็ม  ,มี Code ตรวจสอบว่าบทความอยู่ไหม แล้วให้ loop ออกมา

    if ( have_posts() ) while ( have_posts() ) : the_post();

    page.php

    “เพิ่มหน้า” ซึ่งไม่ได้อยู่ใน post เป็นหน้าต่างหาก เช่น about us, promotion, contact ฯลฯ

    comment.php

    กรอกข้อความคอมเมนท์ และ ดึงมาแสดงไว้ในแต่ละบทความ

    if ( have_comments() ) :
number_format_i18n( get_comments_number() )
wp_list_comments( array( ‘callback’ => ‘twentyten_comment’ ) );

    กล่องรับความคิดเห็น comment_form();

    search.php

    แสดงผลค้นหา

    if ( have_posts() ) :
get_search_query()

    archive.php

    รวมรายการ บทความ ตาม วันเดือนปี

    category.php

    รวมรายการ บทความ ตามหมวดหมู่

    rewind_posts();
get_template_part( ‘loop’, ‘archive’ );

    function.php

    รวม function พิเศษ , ใช้ควบคู่กับหน้าต่างๆ เช่น index.php , single.php ฯลฯ จะแตกต่างกันไปในแต่ละ theme แล้วแต่ concept ของผู้สร้างธีม โดยจะมีชื่อ function กำกับไว้ แล้วดึงไปใช้งาน

    function twentyten_custom_excerpt_more( $output ) {
if ( has_excerpt() && ! is_attachment() ) {
$output .= twentyten_continue_reading_link();
}
return $output;
}

    404.php

    หน้า ไม่พบ หรือ หน้า error เมื่อเรียกหน้าเว็บไซต์ แล้วไม่พบ หรือมีปัญหา จะถูกส่งมาหน้านี้

    style.css

    รวม css ปรับหน้าตาเว็บไซต์ทั้งหมด

    body {
line-height: 12;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: bold;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
..

    CODE WORDPRESS แสดงบทความ

    Loop

    <?php if(have_post()); ?>
<?php while(have_posts()); the_post(); ?>
// Code Html,PHP ของเรา
<?php else; ?>
<?php endif; ?>

    เอา loop ตรงนี้มาใช้

    <div id=”main”> /*สร้าง div ชื่อ main ขึ้นมาเพื่อจัดเก็บกลุ่มของ content ทั้งหมด*/
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /*ถ้า post ให้ while loop ออกมา*/

<div> /*เปิด div ให้เนื้อหาแต่ละเรื่อง*/
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
/*แสดงหัวข้อแต่ละบทความ ใช้ h2 ครอบ link ด้วย the_permalink*/
<?php the_content(); ?> /*เรียกเนื้อหา*/
</div> /*ปิด div ให้เนื้อหาแต่ละเรื่อง*/
<?php endwhile; ?> /*ปิด while*/
<?php else : ?> /*else ที่เป็น state ของ loop ตั้งต้น*/
<?php endif; ?> /*ปิด endif จบการแสดงเนื้อหา*/
</div>

    การทำ pagination

    <div class=”navigation”>
<div class=”next-posts”><?php next_posts_link(“ต่อไป >>”); ?></div>
<div class=”prev-posts”><?php previous_posts_link(“<< ย้อนกลับ”); ?></div>
</div>

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories