Rabbitinblack

Blog

  • ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ

    คงมีหลาย ๆ คนที่อยากมีเว็บเป็นของตัวเอง แต่ก็กลัวที่จะเสียเงินไปแล้วไม่คุ้มค่ากับสิ่งที่ได้มา ถ้าแบบนั้นลองมีเว็บของตัวเองแบบฟรี ๆ ที่ WordPress.com ดิ

    WordPress.com มีอะไรให้เราบ้าง

    มาดูกันนะครับ ว่าทำเว็บฟรีที่ WordPress.com นั้นมีอะไรให้เราบ้าง

    • Domain name ที่เราสามารถตั้งเองได้ แต่ต้องอยู่ภายใต้ wordpress.com เช่น rabbitinblack.wordpress.com หรือ snsd.wordpress.com อะไรแบบนั้น
    • Theme มากมายให้เราเลือกใช้งาน
    • พื้นที่ 3 GB ในการใช้งาน
    • มีการเก็บข้อมูลผู้เข้าชมเว็บให้ และแสดงข้อมูลให้เราดูเข้าใจง่าย
    • ได้เว็บทันที หลังสมัครใช้งาน

    แต่เนื่องจากเป็นของฟรี เราก็ต้องเข้าใจถึงข้อจำกัดต่าง ๆ ที่เราไม่สามารถใช้งานได้ หรืออะไรที่เว็บที่ทำด้วย WordPress ทำได้ แต่เว็บฟรีใน wordpress.com ทำไม่ได้

    ข้อจำกัดของ WordPress.com

    ข้อจำกัดหลัก ๆ ที่น่าจะรู้ไว้ในการทำเว็บฟรีที่ WordPress.com นั้นก็คือ

    • ไม่สามารถลง Theme เพิ่มได้จากที่ WordPress.com มีให้ใช้ (แต่ที่มีให้ก็เยอะพอสมควรแล้ว แค่อาจจะยังไม่ถูกใจเรา)
    • ไม่สามารถเปลี่ยน Layout ของ Theme ที่ใช้ได้
    • ลง Plugin เพิ่มไม่ได้ ใช้ได้เพียง Plugin ที่ทาง WordPress.com กำหนดไว้ให้

    แต่ข้อจำกัดบางอย่าง ก็แก้ไขได้ด้วยเงินครับ 555

    WordPress.com เองก็มีให้เราจ่ายเงินเพื่อเปิดใช้งานในส่วนที่ถูกจำกัดไว้ เป็นราคารายปีแล้วแต่ส่วนที่เราต้องการใช้งาน

    เริ่มต้นสมัคร WordPress.com

    ไปที่เว็บ WordPress.com เลยครับ

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [1]

    หลังจากที่เราคลิ๊ก Sign Up แล้ว จะเป็นหน้าให้เราสมัคร WordPress.com กรอกข้อมูลต่าง ๆ ของเรา

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [2]

    โดยข้อมูลที่เราต้องกรอกก็มีดังนี้

    • Blog Address : URL ของเว็บเรานั่นละ จะตามด้วย .wordpress.com หรือจะเลือกอย่างอื่นก็ได้ แต่ต้องเสียเงิน
    • Username : ชื่อที่ใช้ในการเข้าใช้งาน
    • Password : Password ที่จะใช้คู่กับ Username เพื่อเข้าใช้งาน
    • E-mail Address : ให้ใช้ E-mail ที่มีการใช้งานจริง เพราะทาง WordPress.com จะส่งเมลไปเพื่อให้เรายืนยันการใช้งาน
    • What language will you be blogging in ? : คือเว็บที่เราจะทำ จะทำเป็นภาษาอะไร

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [3]

    เลือก Create Blog เพื่อสมัคร หรือจะ Upgrade ซึ่งจะเสียเงิน แต่มีคุณสมบัติเพิ่มขึ้น หลังจากนั้นจะพบข้อความนี้ ให้ไปเช็คเมลที่เราใช้สมัครไว้

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [4]

    ในส่วนด้านล่างให้เรากรอกข้อมูลของเราลงไปครับ

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [6]

    เนื้อหาของอีเมลจะประมาณแบบนี้ครับ

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [5]

    และแล้วก็ได้เว็บฟรี ๆ เป็นของเราเองแล้ว

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [7]

    ใครอยากมีเว็บฟรี สมัคร WordPress.com ดิ [8]

    ถ้ากลัวว่า WordPress จะใช้งานยาก ลองศึกษาการใช้งานได้นะครับ แต่มันก็ฟรีอยู่แล้ว ดังนั้นลองใช้ก่อนก็ได้ไม่เสียหายอะไรนะครับ ^^

    บทความสอน วิธีใช้ WordPress
  • วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์

    ในการเขียนบทความ หรือการทำเว็บของเรานั้น แน่นอนว่าเราต้องมีการเชื่อมต่อไปยังหน้าอื่น ๆ หรือเว็บอื่น ๆ บ้าง มาดูกันว่า เราสามารถสร้างลิงก์เพื่อใช้เชื่อมต่อกันอย่างไร

    วิธีใช้ WordPress : สร้างลิงก์ในบทความ

    ให้เราลากแถบเพื่อเลือกข้อความที่เราจะสร้างลิงก์ให้

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [1]

    หลังจากนั้นให้เลือก icon ที่รูปคล้าย ๆ โซ่ เพื่อที่เราจะสร้างลิงก์ให้ข้อความนั้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [2]

    กรอกข้อมูลต่าง ๆ ลงไป

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [3]

    โดย URL จะเป็นลิงก์ที่เราต้องการ และ Title จะเป็นข้อความที่ปรากฎตอนที่เรานำเม้าส์ไปวางไว้บนลิงก์นั้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [4]

    เรายังสามารถคลิ๊กที่คำว่า Or link to existing content เพื่อเลือกบทความในเว็บเราที่เราต้องจะลิงก์ไปถึง

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [5]

    ถ้าเราไม่ต้องการให้ข้อความนั้นเป็นลิงก์แล้ว เราสามารถคลิ๊กที่ icon รูปคล้าย ๆ โซ่แตก เพื่อจะลบลิงก์ของข้อความนั้นไป

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [6]

    ถ้าเรามองที่เมนูด้านซ้ายนั้น จะพบว่ามีเมนู Links มันมีไว้ทำอะไรมาดูกันครับ

    วิธีใช้ WordPress : สร้างลิงก์

    ลองมาสร้างกันดูนะครับ เลือก Add new เลยครับ

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [7]

    หลังจากนั้นก็กรอกข้อมูลต่าง ๆ

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [8]

    เราสามารถสร้าง Category เพื่อแบ่งประเภทของลิงก์ที่เราจะสร้างขึ้น

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [9]

    ยอมรับว่า ผมก็ยังไม่เข้าใจในส่วนของ Link Relationship เท่าไหร่เหมือนกันนะครับ แต่ถ้านำไปใช้คู่กับ jQuery น่าจะดีเหมือนกัน

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [10]

    และเมื่อเราสร้างเสร็จแล้ว มันจะไปปรากฎอยู่ที่ sidebar ของเว็บเราแบบนี้ครับ โดยชื่อ Category จะเป็นหัวข้อ และลิงก์ที่เราสร้างขึ้นเป็น List ดังตัวอย่าง

    วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์ [11]

    ตอนต่อไปครับ วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme
  • [WordPress] ดึง template แต่ละส่วนที่เขียนไว้ด้วย get_template_part

    [WordPress] ดึง template แต่ละส่วนที่เขียนไว้ด้วย get_template_part

    ในการทำ WordPress Theme นั้น Template หลัก ๆ ที่เรามีการใช้งาน จะมีส่วนของ header ซึ่งจะมี get_header(), footer ซึ่งจะมี get_footer() และ sidebar ที่จะมี get_sidebar() แล้วถ้าเราจะสร้าง Template ส่วนอื่น ๆ นอกเหนือจากนี้ละ จะมีวิธีการใช้งานอย่างไร

    WordPress : get_template_part

    ยกตัวอย่างเป็นส่วนของเมนู หรือส่วนของ nav เพราะคิดว่าเป็นส่วนที่ทุกเว็บน่าจะมีอยู่แล้ว เราก็สร้างไฟล์ชื่อ nav.php (จะตั้งชื่อว่า abc.php, navigation.php หรือ gee.php ก็แล้วแต่จะตั้งชื่อกันนะครับ แต่ตั้งให้ชื่อสื่อความหมายจะดีกว่านะครับ) โดยในไฟล์ nav.php นั้น เราก็เขียน code สำหรับเมนูเราตามปรกติ เช่น

    [php]
    <div id="nav">
    <?php wp_nav_menu( array(‘menu’ => ‘Main Menu’, ‘container’ => ”, ‘menu_id’ => ‘mainnav’, ‘menu_class’ => ‘clearfix’,’depth’=>’1′) ); ?>
    </div>
    [/php]

    คราวนี้ตำแหน่งที่เราต้องการจะใส่เมนูลงไป ก็ใส่ code ไปว่า

    [php]
    <?php get_template_part(‘nav’); ?>
    [/php]

    ทีนี้เวลาเราจะแก้ไขเมนู เราก็แก้ไขที่ไฟล์ nav.php ที่เดียว แล้วทุกที่ที่ใช้งานเมนูจาก nav.php ก็จะเปลี่ยนตาม

    แต่สมมติในหน้า single.php เราอยากจะใช้เมนูอีกแบบ เราสามารถสร้างไฟล์ชื่อ nav-single.php มาเพื่อใช้งานเฉพาะหน้า single.php ก็ได้ โดยจะเรียกใช้งานแบบนี้ครับ

    [php]
    <?php get_template_part(‘nav’,’single’); ?>
    [/php]

    WordPress : get_template_part กับ child theme

    แต่สิ่งสำคัญของ get_template_part นั้นคือการใช้ร่วมกับบรรดา child theme ทั้งหลาย เพราะ get_template_part จะมีหลักการค้นหาไฟล์แบบนี้ครับ สมมติเราเขียน code ว่า

    [php]
    <?php get_template_part(‘loop’,’index’); ?>
    [/php]

    มันก็จะไปหา loop-index.php ใน child theme ก่อนว่ามีมั้ย ถ้าไม่มีมันจะหา loop.php ใน child theme ถ้าไม่มีอีกจึงจะไปหา loop-index.php และ loop.php ใน theme หลักตามลำดับ เขียนเรียงลำดับได้ดังนี้

    1. loop-index.php ใน child theme
    2. loop.php ใน child theme
    3. loop-index.php ใน theme หลัก
    4. loop.php ใน theme หลัก

    ลองนำไปประยุกต์ใช้งานกันดูนะครับ ^^

  • [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

    [HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

    คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

    โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

    [html]
    <script src="js/modernizr.min.js"></script>
    [/html]

    และกำหนดที่ html ให้มี class เป็นแบบนี้

    [html]
    <html class="no-js">
    [/html]

    และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

    [html]
    <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
    [/html]

    จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

    รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

    โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
    บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

    ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ
  • [WordPress] Plugin สำหรับเปลี่ยน Theme ไปใช้ HTML5 Boilerplate

    [WordPress] Plugin สำหรับเปลี่ยน Theme ไปใช้ HTML5 Boilerplate

    ครั้งที่แล้ว ผมได้แนะนำ Template สำหรับทำเว็บ HTML5 ไว้ นั่นก็คือ HTML5 Boilerplate ทีนี้ถ้าจะให้มาทำ Theme กันใหม่ ก็จะลำบากไปหน่อย ถ้าแบบนี้ลองใช้ Plugin ตัวนี้เลยดีกว่า มันจะเปลี่ยน Theme ของเรา ให้เป็น HTML5 Boilerplate ให้เอง

    WordPress Plugin : HTML5 Boilerplate

    โดยหลังจากติดตั้งเสร็จแล้ว ตัว Plugin จะอยู่ในหัวข้อ Settings หน้าตาของ Plugin จะมีลักษณะแบบนี้

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [1]

    เราสามารถจะเลือกได้ ว่าจะเปลี่ยน Theme ของเราในส่วนไหนบ้าง และหลังจากที่เลือกแล้ว Code ของ Theme เราจะเปลี่ยนไป อย่างเช่น

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [2]

    ก็จะเปลี่ยนไปเป็น

    [Wordpress] Plugin เปลี่ยน Theme ให้เป็น HTML5 Boilerplate [3]

    ถ้าจะลองใช้งานดู ก็ไปโหลด Plugin กันเลยครับ

    Plugin : HTML5 Boilerplate
  • [HTML5] HTML5 Boilerplate

    [HTML5] HTML5 Boilerplate

    สำหรับ HTML5 Boilerplate นั้นเปิดตัวในวันที่ 10 สิงหาคม ตอนนี้ก็ถูกพัฒนามาปีกว่าแล้ว

    [HTML5] HTML5 Boilerplate

    เป็น Template สำหรับทำเว็บ HTML5 ที่มันสนับสนุนไปจนถึง IE6 เลย สาเหตุที่ HTML5 Boilerplate สามารถสนับสนุน IE เวอร์ชั่นเก่า ๆ ได้นั้น ก็เพราะว่ามันจะใช้ Chrome Frame ในการเรนเดอร์ HTML5 ทำให้ IE เวอร์ชั่นเก่า ๆ สามารถใช้งาน HTML5 ได้ ลองดูวิดีโอที่เกี่ยวกับ Template ตัวนี้กันนะครับ

    Getting Started with HTML5 Boilerplate

    https://www.youtube.com/watch?v=NMEB78VX2P0&hd=1

    The Build Script of HTML5 Boilerplate: An Introduction

    HTML5 Boilerplate Walkthrough

    Paul Irish on HTML5 Boilerplate

    ลองศึกษาดูนะครับ ผมว่าเป็น Template สำหรับ HTML5 ที่เจ๋งมากเลยละครับ ไปดาวน์โหลดมาลองใช้งานดูที่เว็บของ HTML5 Boilerplate เลยครับ

    Website : HTML5 ★ Boilerplate