ลองเพจบน Funnel Bang สร้างเว็บไซต์กรวยความรู้ ขายของก็ได้ การตลาดก็ดี?

     เนื่องจากมีบางส่วนของ content นี้ อยู่บนที่เก่า ถ้าอ่านไม่รู้เรื่องตามไม่ทันให้ไปตามที่เก่าที่นี่ครับ  www.pui108diy.com เดี๋ยวว่างๆจะย้ายมาแล้วเขียนให้ครบ ตอนนี้เขียนเทคนิคไปก่อน ไว้ค่อยมาดราม่า ความรู้สึกอีกที

   

      บทความนี้เดิมสร้างขึ้นบน platform funnel bang ในวันที่ 14/1/64 ครับ ( ปัจจุบัน 12/7/2564 ผมย้ายบทความทั้งหลายมาที่เวิร์ดเพลสแล้ว แต่เทคนิคต่างๆในบทความนี้ยังคงใช้ได้บน funnel bang ครับ )  ถ้าสนใจลองไปสมัครใช้งานดูนะครับใช้ฟรี14วัน  www.funnelbang.com   การสร้างคอนเท้นท์รูปแบบ ค่อนข้างง่ายมากทีเดียว แล้วมันก็ปรับรูปแบบทั้งสามอุปกรณ์ให้เลยครับ แต่เราต้องไปปรับช่องไฟต่างๆที่ทำให้มันดูไม่ฃัดกันโดยเฉพาะบนมือถือ เดี๋ยวจะค่อยๆอธิบายการปรับแต่งนะครับ ในส่วนที่นี่ผมคงใส่ระบบcss แปลกๆ และ javascript ลงไปได้ด้วยครับ เพราะfunnel bang อนุญาต โดยเฉพาะผมต้องการให้แสดงเนื้อหาในแบบ hide or show ซึ่งทำให้เพจบทความมีลักษณะการซ่อนเนื้อหา ทำให้ไม่รกหูรกตาได้ แต่กำลังขุดคุ้ยอยู่ครับ ว่าจะทำได้อย่างไรให้สวยงาม

  คอนเท้นท์เดิมถูกสร้างบน Funnelbang.com และถูกย้ายมาเวิร์ดเพลส

Please download pdf to read the content , old content created at Funnel Bang

https://pui108diych.com/wp-content/uploads/tmp/p9000-try-to-use-funnel-bang.pdf

 เนื้อหา

  • A. ตัวอย่างลิงค์ทดสอบ ให้ เปิดเนื้อหาด้วยไอดีของบล็อก ทีละไอดี
  • B. ตย.ลิงค์เปิดเนื้อหาบน text widget และเป็นข้อความแถวเดียวกัน จากนั้นให้ซ่อนปุ่ม
  • ^ตย.ลิงค์เปิดเนื้อหาที่ซ่อนแล้วกระโดดข้ามไปจุดเนื้อหาทันที  
  • C. ปุ่มฟันเนลแบงจ์ไม่สามารถใช้แสดงเนื้อหาที่ซ่อนได้ แต่ ตย. ปุ่มธรรมดาใช้ได้
  • ข้อแตกต่างการใช้ ลิงค์ หรือปุ่ม ในการเปิดปิดเนื้อหา ในแง่ seo
  • D. ตย. สร้างปุ่มเปิดปิดเนื้อหาด้วยspan ใช้คู่กับ a ลิงค์ ถูกและผิดวิธี

   

   

เนื่องจากหน้านี้เป็นบทความ ผมอยากได้สไตล์หัวข้อเป็นลักษณะ กรอบจุดไข่ปลา(dot)เหมือนข้างบน ผมจะทำไงได้บ้างครับ ??

ซึ่งถ้าใช้ทูลอัตโนมัติที่เขาจัดให้ ทำได้มากสุดก็เป็นกรอบนอกแค่นี้ครับ ซึ่งการทำกรอบนอกทึบบนคอลลัม ง่ายมาก ใช้เวลาแค่ 2 วินาทีเสร็จแต่ไม่ชอบแบบทึบๆ อยากได้แบบไข่ปลาแทน ทำไงดี

เพิ่ม global css ให้ class

 วิธีเพิ่มกรอบไข่ปลา (กรอบdot) บน block ของ funnel bang

funnel bang ลองสร้างคลาสกรอบดอท เฮดเดอร์ของบทความ how to make dot border of content_header like wordpress

   

ต้องการหัวข้อ มีกรอป แบบจุดไข่ปลา ดังรูปบน ต้องทำการเพิ่ม css ลงไปนะครับ

ตามขั้นตอนข้างล่างดังนี้

 ขั้นตอนการเพิ่มคลาสในblockหลัก

funnel bang ขั้นตอนการเพิ่มคลาสdiv(กรอบดอท เฮดเดอร์ของบทความ) add class or named_div_class (of dot border of content_header)

  

ขั้นแรก คือการเพิ่มคลาสในบล็อกหลัก ในหน้าedit page  จะสามารถเพิ่มได้ที่เดียวเท่านั้นในแต่ละบล็อกหลัก เมื่อได้คลาสมาแล้ว สามารถนำไปใช้งานประกอบกับcss หรือ javascript เพื่อจัดลูกเล่นได้ตามต้องการ แต่ต้องศึกษาโครงสร้างเลย์เอ้าท์ของ ฟันเนลแบงจ์ก่อนถึงจะใช้งานได้

    

 ขั้นตอนการเพิ่มกรอบไข่ปลา

   

  1. คลิ๊กที่ block หลัก เพื่อ เพิ่มคลาส บน block div กรอบนอกสุดที่ทูลของฟันเนลแบงจ์อนุญาต ตามโครงสร้างเพจ ซึ่งมีอยู่จุดเดียวในแต่ละบล็อก แต่เดิมคือ class=”widget-row”
  2. เลือกไปที่  add custum name to this block  แล้วใส่ชื่อคลาสตามต้องการ
  3. เมื่อเพิ่มคลาส h-dot ลงไป block divนั้น จะมีคลาสเพิ่มเป็น class=”h-dot” แต่เนื่องจาก blockตัวนี้เป็น divกรอบนอกสุด และเป็นโครงสร้างของทุกบล็อกที่ขยายตัว100% เวลาปรับส่วนอื่นๆจะรวนไปหมด จึงไม่เหมาะสมที่จะสร้างกรอบdot โดยตรง

   

เมื่อไปสำรวจดู ตามโครงสร้างเพจ พบว่า tag div class grid-content ซึ่งเป็นกรอบด้านในถัดจาก blockหลัก มีความเหมาะสมกว่าที่จะทำกรอบไข่ปลา เราจึงจะใส่กรอบไข่ปลาในกรอบdivรองนี้แทน  โดยใส่ custom css ใน global เป็น

   .h-dot  .grid-content {

       border-radius:10px;
        border:5px dotted #F19F55;

ซึ่งมึความหมายว่า  เฉพาะ div คลาส grid-content (บล็อกรอง) ที่อยู่ใน div คลาส h-dot (บล็อกหลัก) ให้แสดงcss ที่มีกรอบไข่ปลาหรือกรอบด็อทตามcssนี้ครับ

โดยการใส่ลงใน css ของ เพจ แบบglobal คือ แสดงทุกเพจ ที่มีคลาสดังกล่าว คือใส่โค๊ดทีเดียวใช้ได้ทุกหน้านั่นเอง

  เปิดหน้าต่าง แล้ว เพิ่ม global css ลงในเพจ

funnel bang ขั้นตอนการเพิ่มcss ที่ต้องการ ให้แสดงผลทุกหน้า apply custom CSS on Global custom code or page only colde  

   

   เราสามารถเพิ่มหรือแก้ไข css แบบ global ,หรือ แบบ page only ก็ได้ ในหน้าอีดิทเพจ รูปเมนูแนวตั้งซ้ายมือ ให้เลือกที่รูป  // เฟือง (funnel setting) > เลือก custom code >เข้าหน้า global custom code

   

  2. ขั้นตอนการปรับช่องไฟ ซ้าย-ขวา ของเพจหลัก ด้วย css

  

funnel bang การเปลี่ยนปรับช่องไฟด้านซ้ายขวาให้กว้างขึ้นหรือแคบลง ให้แสดงผลทุกหน้า change-grid-content-max-width

       

    ถ้าต้องการปรับช่องไฟด้านซ้ายขวาให้แคบลง เพื่อใช้กับเว็บไซต์สำหรับอ่านบทความ ซึ่งเน้นใช้บนมือถือ เพื่อทำให้มีตัวอักษรในการอ่านเยอะขึ้น(****ถ้ามือถือมันไม่กว้างเต็มจอ ในหน้าbuilderต้องเปลี่ยนไปแก้ที่อุปกรณ์มือถือ แล้วเลือกแต่ละblock ติ๊ก stretched ออก มันจะขยายเต็มหน้าจอเหมือนกัยอุปกรณ์ desktop)  ให้ปรับที่ความกว้างของ grid-content ครับ เราต้องการเยอะไว้ก่อน เพราะเราสามารถปรับ widget ของ text ให้มีช่องว่างpadding แคบลงอีกกี่เปอร์เซนต์ก็ได้ในภายหลังอีกทีได้ครับ แต่จะไม่สามารถขยายได้เพราะเพดานของเก่าที่original grid-content maxwidth เขาตั้งไว้ที่90%

  

  ให้แก้ไขดังนี้ครับ

   

   .style-boxed-layout  .grid-content{
      max-width: 100%;
     }
    .grid-content {
      width:95.2%;
     }

     อธิบายสั้นๆ คือให้กำหนดให้div grid-content และdiv style-boxed-layout ปลดความกว้างสูงสุดคือ100% (จากเดิม90% default )  แล้วจึงกำหนดอีกทีให้grid-content มีความกว้าง เล็กลงเหลือ 95.2% เพื่อให้มี ระยะหดเข้าซ้ายขวาข้างละ 2.4%

   

ทำการเซฟข้อมูล css ลงใน global เหมือนขั้นตอนวิธีเพิ่มcssด้านบน

   

   

   

   

โครงสร้าง เพจ Block div Structure ใน Funnel Bang

   

funnel bang block_structure_desktop โครงสร้างบล็อกdivแสดงผลบนเครื่องdesktop แพลตฟอร์ม ฟันแนลแบงจ์

   

หน้าเพจหน้าหนึ่งๆใน funnel bang ประกอบด้วย block เรียงซ้อนกันจากบนลงล่างแต่ละบล็อกจะมีวิธเจ็ทต่างๆที่ให้ใช้ได้เช่น ตัวอักษร รูป ปุ่ม เรียงใส่ลงไปในแต่ละบล็อก ข้อมูลต่างๆใน1บล็อกจะถูกเก็บไว้ในฐานข้อมูลของแพล็ทฟอร์ม ซึ่งมีบางอย่างอนุญาตให้ทำดัดแปลงได้ และบางอย่างไม่อนุญาต 

   ใน1 block จะประกอบด้วย กรอบ div วางซ้อนกัน ต้องมีรูปแบบ ดำ-แดง-น้ำเงิน-เขียว-เหลือง เป็นอย่างน้อย กรอบหลักdiv ด้านนอกสุด class grid-row คือดำจะมีชื่อid ออโต้ว่า container-widget-15xxxxxxxxxx โดยประมาณ การสร้างสรรค์divในบล็อกหลักblockใหญ่จะทำได้ในรูปแบบ  divแดงคอนเทนgrid-content  divน้ำเงินคอลัม และ  divเขียวแถว  – divเหลืองเป็นwidget ที่มีชื่อid ออโต้ อีกที  มีแค่ดำกับเหลืองเข้มที่มีชื่อไอดีแบบอัตโนมัติที่ต้องสนใจเป็นพิเศษ

   

funnel bang block_structure_mobile โครงสร้างบล็อกdivแสดงผลบนมือถือ แพลตฟอร์ม ฟันแนลแบงจ์   

เมื่อแปลงเป็นมือถือ การแสดงผลจะเป็นดังรูปบน 

   

เราศึกษาโครงสร้างของ block div หรือ widget block, tag หรือ element ของ funnel bang เพื่อที่จะนำมาสร้าง class , ID และข้อมูลอื่นๆ เพื่อนำมาประยุกต์ใช้งานต่างๆ เฃ่นใช้กับ javascript เพื่อทำลูกเล่นต่างๆในการเปิดปิดคอนเท็นต์ หรืออื่นๆได้ตามต้องการ

   

    เท่าที่ลองใช้ เราสามารถใช้เครื่องมือของfunb เพิ่ม class ได้ เฉพาะ block div หลัก ชื่อID = container-widget-159627xxxxx คลาสเดิมคือ “grid-row” กรอบนอกที่เดียวเท่านั้น การยัดข้อมูลอื่นๆ เช่น ชื่อคลาส ชื่อไอดี เนม ใน tag หรือ element อื่นๆ ไม่สามารถทำได้โดยเครื่องมือของเขา

   

    เราสามารถยัดข้อมูลทุกอย่างที่กล่าวมานี้ ลงในอีลีเมนท์อื่นๆที่เป็นตัวอักษรสีน้ำเงินข้างล่างได้ ส่วนที่อื่นหมดสิทธิ์ โดยใช้ทริ๊กยัดข้อมูลโดยตรงใน ด้วยbrowser ลงในtext widget โดยใช้การตรวจสอบองค์ประกอบของเบ้าเซอร์ แก้ไขข้อมูลในอีลีเมนท์เหล่านั้น แล้วทำการเซฟยัดข้อมูลโดยตรงได้ จึงจำเป็นที่ต้องสร้างแผนผัง div wiget element ของ funb เฉพาะวิดเจ็ทตัวที่ใช้บ่อยๆ เอาไว้เพื่อทำความเข้าใจจุดที่สามารถแก้ไขได้ และจุดที่เรียกไอดีหรือชื่อIDของdivได้ ดังนี้

   

ชื่อไอดีของบล็อกหรือวิดเจ็ทที่อ้างอิงได้  funbจะสร้าง id=”” ใหัอัตโนมัติเฉพาะ divสีดำ และ divเหลือง

 (ในส่วนข้อความตรงนี้ในบทความนี้บนพื้นสีเหลืองอ่อน สร้างจาก text widget เรียงต่อๆกันจากบนลงล่าง เริ่มต้นด้วย divดำ แดง น้ำเงิน-คอลัม โดย มีเแค่1คอลัม โดยแต่ละtext widget มีรูปแค่1รูป   ในแต่ละ text widget จะขึ้นด้วยdivสีเขียวwidget-rowและdivเหลืองตามidวิธเจ็ทที่เลือกใช้ คือเป็นแถวๆเรียงลงไปเรื่อยๆ โดยกรอบดำจะมีแค่กรอบเดียว และครอบคลุม ทุกวิธเจ็ทที่เรียงต่อกันเสมอ )

<div id=”container-widget-159627xxxxx”

    class=”grid-row ….” >

    /* ^ funb ให้ใส่ class เพิ่มเติมได้ทีเดียว */
  <div class=”grid-content “>
    <div class=”grid-column”>
    1-1  <div class=”widget-row “>

    1-2           blank block       

                 for  any wiidget     

   

funnel bang text_widget_button โครงสร้างdiv ของ text widget div block structrue    โครงสร้างdiv ของ text widget

    1-1  <div class=”widget-row “>

    1-2   <div id=”text-widget-1596270106299″

               class=”.. textWidget ..”  >   /*txt วิดเจ็ท */

    1-3    <div class=”text-widget-content”>

    1-4      <p><img src=”..” >test</p>   /* ใส่รูปได้*/

              /*รูปที่ใส่ จะใส่ alt , des ไม่ได้ ไม่มีเครื่องมือใส่*/

  

funnel bang heading_widget_button โครงสร้างdiv ของ heading widget div block structrue    โครงสร้างdiv ของ heading widget

    1-1  <div class=”widget-row “>

    1-2   <div id=”heading-widget-1596270106299″

               class=”.. headingWidget ..”  >   /*heading วิดเจ็ท */

    1-3    <div class=”text-widget-content”>

    1-4      <h2>Heading</h2>> 

              /*     */

  

funnel bang image_widget_button โครงสร้างdiv ของ image widget div block structrue  โครงสร้างdiv ของ image widget

    2-1  <div class=”widget-row “>

    2-2   <div id=”image-widget-1596270106299″

               class=”.. imageWidget ..”  >   /*heading วิดเจ็ท */

    2-3    <div class=”imagebox”>

    2-4     <div class=”widget-preserving-ratio-outer”>

    2-5       <div class=”widget-preserving-ratio-inner”>

    2-6        <a class=”lazyImage..”><img src=”..” alt=”..” ></a> 

              /*     */

  

    

    

   


สร้างลิงค์โดดไปยังจุดเนื้อหาในหน้าเดียวกัน

    วิธีสร้างจุดหมายปลายทาง add anchor in block 

    

    เราสามารถกำหนดจุดหมายปลายทางเพื่อให้ลิงค์กระโดด มาที่ บล็อก ด้วยทูลของ funnel bang ดังนี้ เมื่อใส่ตามนี้ระบบของแพล็ทฟอร์มจะสร้างจุดปลายทางด้วยการเพิ่มชื่อลิงค์ใน บล็อกID ของ containner widget ให้ซึ่งมีการกำหนดด้วย ไอดีของลิงค์ ID=”ไอดีปลายทาง” และ ระบบ name =”ไอดีปลายทาง” ซึ่ง name ในปัจจุบันจะไม่ใช้แล้ว ปรกติจะใช้ไอดี ในการระบุปลายทาง แต่อย่างไรก็ตาม การระบุ name จะทำให้การกระโดดนุ่มนวลขึ้นในแพล็ทฟอร์มนี้

   

funnel_bang how to give name attribute in anchor_point (distination jump point) การสร้างจุดปลายทางกระโดด ให้ name ใน<a> (ในบล็อก div) ด้วยทูลของ ฟันเนลแบงจ์”></p><p style=    

เราพบว่าถ้าเราทำตามขั้นตอนสร้างจุดปลายทางของการกระโดดบนบล็อกโดยทูลที่มีให้ 1-3ดังรูป ระบบจะสร้างจุดปลายทางของกระโดดด้วยการสร้างลิงค์ที่แก้ไขอะไรไม่ได้เลยหลัง container-widget-xxxxx แต่ก็ทำงานได้ดีครับ ถ้าต้องการการกระโดดที่นุ่มนวลแนะนำให้ใช้ครับ ในที่นี้จะพบ id= change_page_layout อยู่ใน tag a (anchor)

   

วิธีสร้างต้นทางการกระโดด
   

   รูปด้านล่างต่อไปนี้แสดงการใส่หรือกำหนดลิงค์บนตัวอักษรด้วย text widget ด้วยทูลของฟันเนลแบงจ์ สามารถใส่จุดหมายที่จะกระโดดได้ คือ ชื่อไอดีของจุดหมายปลายทาง(ID) จากต้นทางข้างบนให้ใส่ #chang_page_layout   ดังวิธีข้างล่าง   **ส่วน ตย. ข้างล่าง ชื่อที่ใส่จะไม่เหมือนกัน เพราะต้องการแสดงการใส่จุดหมายอีกวิธีหนึ่ง ด้วยวิธีแอบยัด ID เข้าไปที่อีลีเมนท์ใดๆ ในรูปข้างล่างจะใช้จุดหมายปลายทางชื่อ #pushbyurself1 ซึ่งต้องไปสร้างต้นทาง ชื่อ id=pushbyurself1 ในอีลีเมนท์ใดๆก็ได้ ไม่จำเป็นต้องเป็น <a> หรือ anchor

    

funnel_bang how to add hash_id_to_anchor_a jumping link in same page การสร้างลิ้งค์ต้นทางการกระโดด ในหน้าเดียวกัน ด้วยทูล ฟันเนลแบงจ์

 

ต้นทางกระโดดให้ ใส่ hash# ตามด้วยชื่อID ลงในตัวอักษรลิงค์ expandH

     การใส่จุดหมายการกระโดดด้วยไอดี ด้วยการใส่ ลิงค์ ใน anchors a หรือ tag a สามารถทำได้ด้วยเครื่องมือของ funb อยู่แล้ว ให้ใส่ external link ตามด้วย hash #ชื่อID  ซึ่งชื่อ ไอดี ตามโครงสร้างเพจของ funnel bang หลักๆจะเป็นชื่อคอนเทนเนอร์หลักหรือกรอบblock div เช่น container-widget-159627xxxxx   และชื่อไอดีของ widget  เช่น  image-widget-1596270106299  หรืออื่นๆ เราจะหามันด้วย ทูลของ browser กดคลิ๊กขวาที่ใดๆ ในตำแหน่งที่ต้องการสำรวจ เลือก ตรวจสอบองค์ประกอบ หรือ inspection element เพียงแต่หาชื่อวิธเจ็ทหรือdiv ตามโครงสร้างของเพจให้เจอก็พอ    เมื่อใส่ตามข้างบนแล้วสามารถกระโดดข้ามไปยังเนื้อหาในหน้าเดียวกันได้ทันที

   

    แต่ถ้าเราอยากตั้งชื่อ ไอดี หรือ คลาส ในพารากราฟ <p> <span> แอบเปลี่ยนสไตล์ ใส่javascript inline เราก็ใช้เทคนิคคล้ายกัน ดังข้างล่าง ซึ่งใช้ทูลของ text widget ของ ฟันเนลแบงจ์ ตามปรกติจะใส่ไม่ได้เพราะไม่อนุญาต เช่น ถ้าต้องการสร้างIDให้<p id=dot_h_add_class></p> หรือ ถ้าเราต้องการใส่ จุดปลายทางกระโดดในระหว่าง <p> เราก็สามารถใส่   <a name=”p9000_dot_h_add_class” id=”p9000_dot_h_add_class” class=”anchor-point-link”></a>   ซึ่งเป็นปลายทางแบบfunnel bang เราก็แอบใส่ลงไปก็ได้เช่นกัน ดังวิธีข้างล่าง 

   

เทคนิคยัด คลาส ไอดี อีลีเมนท์ ใน text widget

funnel bant trick_to_add_id_or_class or anything on text widget เทคนิคยัด คลาส ไอดี อีลีเมนท์ หรืออื่นๆ ใน text widget

   

แอบเพิ่ม class togglep ให้ ลิงค์ แล้ว save เพื่อจะนำไปใช้งานใน จาวาสคริ๊ปโค๊ด **ต้องลองไปทดลองทำดูนะครับ**

   อย่างที่กล่าวไปแล้ว เราสามารถใส่ข้อมูลhtmlอื่นๆที่ทางทูลฟันแนลแบงจ์ไม่ได้จัดมาให้ โดยการยัดใส่ข้อมูลลงในtext widget โดยอ้อมโดยไม่ใช้ทูลของtxtวิธเจ็ธ แต่ใช้ทูลของ browser ตามขั้นตอน5.1 ด้วยการหาจุดที่จะเปลี่ยนหรือเพิ่มข้อมูลให้เจอ ด้วยการเอาเม้าส์ชี้ที่ตำแหน่ง ในวิธเจ็ท text widget กดคลิ๊กขวา เลือก การตรวจสอบองค์ประกอบ ขั้นตอน 5.4 เราก็เพิ่มหรือแก้อะไรตามต้องการได้เลยกดขวามีตัวเลือกให้แก้แบบhtml (เมื่อต้องการเพิ่มอีลีเม้นท์อื่นๆที่เป็นภาษาhtml ให้เลือกตัวนี้แล้วพิมพ์ภาษาhtml)  แล้วกด save แค่นี้เราก็แอบสร้าง class หรือ สร้าง ID หรือแม้แต่แอบยัด อีลีเมนท์ใดๆลงไปได้ใน ส่วนของ text widget ได้เลย ขอแค่ข้อความนั้นอยู่ในส่วนของ text widget    ***การแก้ไขเพิ่มเติมต้องอาศัยจังหวะการเข้าทำที่ถูกต้อง แต่ละbrowser ไม่เหมือนกัน ไปลองหัดทำดูนะครับ ซึ่งโดยทั่วไปจะต้องกดsaveก่อนกันเสีย แล้วคลิ๊กไปที่ text widget ให้ขึ้น save changes ก่อน1ครั้ง แล้วทดลองแก้ไขตามขั้นตอนนะครับ ***

   

    

       

    

เกริ่น ทำปุ่มเปิด-ปิดซ่อนเนื้อหาแก่ผู้อ่าน ด้วย js 

   ( scriptนี้ ใช้งานกับFunnel Bang และ wordpress-ที่นี่ ได้ )

     ** wordpress จะกล่าวในที่อื่นๆ ต้องลงscript โดยเพิ่มplug-in เข้าไปก็ใช้งานได้เหมือนกัน **

     

     เนื้อหาที่ยาวเกินไปก็มีข้อเสียไม่ใช่ว่าจะดีทั้งหมด เนื้อหาที่ผู้ชมอยากดูตามหัวเรื่องปรกติเราก็แสดงให้ดูทันที แต่เนื้อหาอธิบายเพิ่มเติมสำหรับผู้ชมบางคนที่รู้เรื่องอยู่แล้วจะทำให้อ่านแล้วเยิ่นเย้อไม่เข้าประเด็นสักที การที่ผู้เยี่ยมชมเว็บมีความรู้สึกดีๆ ก็ต่อเมื่อผู้ชมอยากดูในสิ่งที่เขาต้องการเท่านั้น การมีปุ่มเพื่อซ่อนหรือเปิดเนื้อหาเป็นการสร้างประสบการณ์ที่ดีแก่การเข้าชม เมื่อผู้ชมต้องการคำอธิบายเพิ่มเติมจะกดปุ่มหรือลิงค์ที่จะทำการแสดงเนื้อหาที่ซ่อนออกมา ในแง่ seo เนื้อหาเหล่ายังอยู่ในเพจนี้และ search engine ยังเก็บข้อมูลเนื้อหาไปอยู่ดี การสร้างปุ่มเปิดประเภทนี้ แนะนำเป็นลิงค์เปิดปิดเนื้อหา ใส่ href=”#ชื่อไอดีที่ต้องการเปิดเนื้อหา ” ซึ่งเหมือนกับลิงค์กระโดดไปยังจุดเนื้อหา แต่ต้องมีโค๊ดเพิ่ม และต้องซ่อนเนื้อหานั้นไว้ก่อน ซึ่งseoจะเนียนมากกว่าปุ่มกด

   

      การสร้างปุ่มซ่อน-แสดงเนื้อหา จะต้องใช้ javascript(โค๊ด)(ไฟล์js) ใส่ลิงค์ ใส่คลาส ใส่ไอดี ระบุไอดี โค๊ดสั้นๆ(html ,css) ในแต่ละส่วนของเนื้อหา เพื่อให้เพจทำงานได้ ต้องทำความเข้าใจเพิ่มด้วยว่าข้อจำกัดของ platform funnel bang อนุญาตให้ทำได้แค่ไหน อย่างไร ซึ่งคุณต้องพอมีความรู้เรื่อง ภาษา js html css พอสมควร

   

     ส่วนเนื้อหาที่ซ้ำๆกันแต่ไม่เกี่ยวกับหัวเรื่องโดยตรงและอาจต้องแสดงในหลายๆเพจ  ผมแนะนำให้เป็นปุ่มหรือลิงค์ป๊อปอัพ ที่ผู้ชมเลือกกดเมื่อสงสัยหรือต้องการคำอธิบายในเนื้อหานั้น ควรใช้ popup ของ funnel bang (มีทูลให้ใช้ โดยทูลจะใช้ js โหลดข้อมูลจากเซิฟเวอร์โดยตรง แต่ผู้ชมก็ยังอยู่ในหน้าเนื้อหาหลักดังกล่าว) เนื้อหาป๊อปอัพอธิบายหรือโหลดรูปขึ้นแสดงดังกล่าว ข้อมูลในส่วนนี้จะไม่อยู่ในเนื้อหาโดยตรง ทางseo จะไม่จัดว่าเป็นการคัดลอกและขยายเนื้อหาซ้ำๆ

   

     สิ่งที่ทำให้โหลดหน้าเว็บช้าคือ ในหนึ่งเพจมีรูปมากเกินไป รูปมีขนาดใหญ่และโหลดพร้อมๆกัน  อันดับ seo ก็จะตกลง โดยปรกติการเขียนคอนเทนต์ อย่างน้อยเราจะมีรูปหลักใน1ย่อหน้าอยู่แล้ว ถ้าเราใช้วิธีการที่จะแสดงเนื้อหารอง ถ้าผู้ชมต้องการดูภาพมุมอื่นๆก็กดปุ่มแสดง โดยให้โหลดมาทีหลังและอยู่ในหน้าเพจเดียวกันแบบไม่ใช้pop up และไม่ต้องการให้รูปหรือข้อมูลเหล่านั้นเกี่ยวข้องอยู่ในเนื้อหาเพจโดยตรง แนะนำใช้ javascript ให้แสดงรูปที่ยังไม่เคยมีการโหลดมาก่อนก็ต่อเมื่อผู้ชมกดปุ่มหรือกดลิงค์เรียกแสดงเท่านั้น เมื่อกดปุ่มจะเรียกฟังก์ชั่นที่มีcode ทำหน้าที่ยัดข้อมูลรูปหรืออื่นๆเข้าอีลีเม้นท์โดยตรง เช่น <p></p>

document.getElementById(elemid).innerHTML =” “;

   

สิ่งที่ต้องการสร้าง

   

  1. มีปุ่มหรือลิงค์เปิด-ปิดเนื้อหาที่ละส่วน ทีละไอดี
  2. ปุ่มหรือลิงค์เปิดเนื้อหาทั้งหมดที่ซ่อนอยู่ในหน้านั้น กดทีเดียวแสดงทั้งหมด ทีละคลาส
  3. ใช้ปุ่มหรือลิงค์ ยัดข้อมูลที่ยังไม่เคยโหลดที่ตั้งรูป ให้โหลดรูปหรือข้อมูล โดยใช้ js

   

การที่จะให้ทำงานได้ต้องสร้างโค๊ด js ช่วย โดยให้เนื้อหาทั้งหมดถูกจะถูกซ่อนเอาไว้ก่อน ด้วยโค๊ด js เช่นกัน

   

ทำไมใช้ js ซ่อนคอนเทนต์แทนcss->  การซ่อนคอนเทนต์เฉพาะคลาสหรือไอดีโดยปรกติใช้cssทำข้อความจะหายทันทีทุกที่ทุกเวลา แต่ที่ฟันเนลแบงจ์ผมแนะนำให้ใช้ js ซ่อนในภายหลัง เพราะเวลาอยู่หน้าจอedit page ข้อมูลจะแสดงทั้งหมดทำให้ง่ายต่อการแก้ไข มันจะซ่อนก็ต่อเมื่อคนดูเข้าชมเท่านั้น จะสะดวกกว่ามาก แต่จะมีช่วงเสี้ยววินาทีที่อาจเห็นข้อความที่ถูกซ่อน เนื่องจากjs จะซ่อนได้ก็ต่อเมื่อโหลดเสร็จเท่านั้น

   

   

———————————

 

  • ^ตย.ลิงค์เปิดเนื้อหาที่ซ่อนแล้วกระโดดข้ามไปจุดเนื้อหาทันที  ขยายความ>..

——————————–

 

ตัวอย่าง การใช้ลิงค์ เพื่อแสดงคอนเทนท์ในวิธเจ็ทไอดี ทีละส่วน ด้วยการส่ง href=”#ชื่อไอดี” โดยใช้จาวาสคริ๊ปเบื้องหลัง ตัวลิงค์ a เต็มๆ ใส่แค่นี้นะครับ ต้องยัดข้อมูล class=”a_togglep”ลงไปใน text widget ให้ได้ก็จบ

<a href=”#container-widget-1596117581727″ class=”a_togglep”>expand-hide(จงแสดง-ซ่อน ข้างล่างนี้)</a>

   

….expand-hide(จงแสดง-ซ่อน ข้างล่างนี้)

(ลิงค์ข้างบน สามารถแสดง-ซ่อนส่วนล่างสีนี้ทั้งหมดได้

div class=”grid-row toggle-pui” id=”container-widget-1596117581727″) ต้องใส่ class toggle-pui เพิ่ม เพื่อซ่อนเนื้อหา

ในบล็อกนี้ เราสามารถขยายคอลัมกี่อันก็ได้ แต่จะเปิดปิดคอนเท้นได้ก็ต่อเมื่อมีไอดี ของ txt widget หรือ head widget ตามโครงสร้างของfunb ดังนี้ เช่น ยิง ลิงค์ ไปที่ heading-widget-1596702926232  โดยใส่html ตามนี้…

<a href=”#heading-widget-1596702926232″ class=”a_togglep”>แสดง/ซ่อน offerข้างล่างทีละบรรทัด</a>

   

แสดง/ซ่อน offerข้างล่างทีละบรรทัด

  พิเศษ สำหรับคุณ code 90,900 ราคาเพียง คลิ๊ก…. 

(คลิ๊กสีแดงแสดงลดราคา ขีดฆ่าใช้ <del>90000</del>  ใส่ลิงค์คล่อมตัวหนังสือหลัง h4 หลังspanสีแดง <a class=”a_togglep” href=”#heading-widget-1596702926230″ style=”color:inherit !important;text-decoration:none !important;”> แบ่งคร่อมเฉพาะตัวหนังสือหลังspan หลังdel รวม3ช่วง ยุ่งยากหน่อย </a> )

เราให้ฟรี 00,000 บ. ไม่มีเงื่อนงำ….

  จริงหรือ? ที่นี่คือ id=heading-widget-1596702926230 ถูกเปิดปิดด้วยลิงค์สีแดงด้านบน

 ข้อความที่ซ่อนในบล็อกนี้ เป็นคอมลัมกรอบสีเหลืองเข้มและเทาเข้มข้างบนนี้ เป็น header widget ที่มี id ของ funb เราไม่สามารถสร้างคลาสให้ครอบคลุมอย่างถูกต้อง เพื่อซ่อนข้อความเหล่านี้ได้เลย ต้องใช้วิธีการซ่อน ด้วย css หรือ js ที่ต้องเรียกแต่ละไอดีให้ซ่อน ไม่สะดวก แต่ทำได้ ถ้ามีวิธเจ็ทจะซ่อนเยอะ10ที่ใน1เพจ ก็ต้องกำหนดไอดีทั้งสิบบรรทัดให้ซ่อน กลับกันการซ่อนเป็นบล็อกสะดวกกว่ามาก เพราะกำหนดเป็นคลาส เช่น toggle-pui ให้ซ๋อน เป็นต้น

   

…..ตัวอย่างต่อไปนี้ข้างล่าง จะใช้ลิงค์เปิดปิดคอนเทนท์ ใน text widget เดียวกัน ของ funnel bang ตัวลิงค์เหมือนเดิมครับ (ตัวลิงค์จะใส่ลูกเล่น onclick ให้ซ่อนตัวมันเองหลังกด)   แต่ข้อความข้างล่างทั้งหมดจะเป็นลักษณะ  <p> ดังนี้ แสดง… …ข้อความ1 ข้อ2 ข้อ3 ข้อความ4</p>   ให้เราสร้าง span ด้วย funb ยัด <span id=”ชื่อไรก็ได้อย่าให้ซ้ำกัน” class=”tog_span_inl”> คร่อมตรงส่วนข้องความที่จะซ่อน  ในส่วน style=”เอียง” ถ้าไม่ต้องการให้ลบทิ้งไปครับ

 <a href=”#cont1″ class=”a_togglep” onclick=”this.style.display=’none'”>แสดง…</a> 

<span id=”cont1″ style=”font-style: italic;” class=”tog_span_inl”>การจะทำอย่างนี้ได้..</span>

   

ดังนี้  แสดง…….แสดง…….

ปุ่มของฟันเนลแบงจ์ไม่สามารถใช้แสดงเนื้อหาที่ซ่อนได้

   

button widget ของฟันเนลแบงจ์ ไม่ได้สร้างจากelement button แต่สร้างจากdiv ที่มี a คร่อมขยายเป็นปุ่มทับ span ซึ่งมีลักษณะโค๊ดฝังซ่อนปิดไม่สามารถยัดข้อมูลอื่นๆแบบtextเพิ่มได้เลย จึงไม่มีลักษณะ html ที่แก้ไขได้ จึงเป็นปุ่มที่ไม่สามารถแก้ไขแบบยัดค่า class หรือค่าอื่นๆได้เลย ไม่เหมาะกับการใช้งานเป็นปุ่มเปิดปิดคอนเทนต์

แต่ปุ่มธรรมดา สามารถซ่อนหรือแสดงเนื้อหาได้

   

ทดสอบการสร้างปุ่มด้วยการยัดข้อมูล <button> ลงไปใน text widget ได้เป็น

จงกดซ่อน/แสดงปุ่มสีฟ้าด้วย>>....

<button onclick=”toggle_bl(‘button-widget-1596805917653’);”></button>

ปุ่มทั่วไปแบบนี้ สามารถใส่ลูกเล่นและหน้าตาได้ทุกแบบประเภท แต่จะเสียเวลาสักหน่อย

ข้อแตกต่างการใช้ ลิงค์ และปุ่ม ในการเปิดปิดเนื้อหา ในแง่ seo

   

การใช้ปุ่ม ด้วยคำสั่ง onclick ตัวปุ่มจะไม่มีการเชื่อมโยงไปที่คอนเทนต์ที่ซ่อนไว้ด้วยภาษา html ซึ่งการเก็บข้อมูลเบื้องต้นในseo จะดูดข้อมูลคอนเทนท์ในhtml เป็นส่วนใหญ่ ซึ่งข้อมูลที่ซ่อนแสดงด้วยปุ่มอาจไม่ถูกเก็บไปก็ได้

   

การใช้ ลิงค์ ด้วยการใส่ <a href=”#ชื่อไอดีที่ต้องการแสดงเนื้อหา”> จะมีการเชื่อมโยงการกระโดดด้วยhtmlโดยตรงไปที่เนื้อหาที่ซ่อนเอาไว้ เพียงแต่เรามีjsโค๊ดให้แสดงแต่ไม่ต้องกระโดด  คอนเทนท์ที่ซ่อนส่วนใหญ่จะถูกเก็บข้อมูลในระบบseoแน่นอน ( แต่ <a> สามารถใช้ onclick ได้เช่นกัน แต่ควรใส่ href=”#” เอาไว้ด้วย ซึ่งจะเหมือนปุ่มนั่นเอง) ด้วยonclickเราสามารถ

   

   

ทำลิงค์ให้เหมือนปุ่มด้วยspan แสดง-ซ่อนเนื้อหา

   

ได้ด้วย ในลักษณะเพิ่มขยายขอบspan  <span style=”background-color: #f7cfab; border: 3px solid #f0a765; border-radius: 10px; padding: 0.6% 2.5%;” ><a></a></span> เช่นกัน แต่ต้องกดปุ่มให้อยู่ในช่วงตัวหนังสือ ขอบปุ่มกดไม่มีผล

   

ปุ่มขอบspan?>> ..

แต่เราไม่สามารถใช้jsและaแสดงคอนเทนต์ได้ถูกต้องถ้าใส่แบบนี้ <a><span></span></a>

จงแสดง1>>..
จงแสดง2>>..

   

ปุ่มนี้แบบ?>> ..

 

 ขั้นตอนสร้างลิงค์ให้เปิดปิดทีละคอนเทนต์


  • 1. ก๊อปปี้ code สีดำๆด้านล่าง 2ส่วน ลงไปในเพจ

   

  • 1.1  โค๊ดหลัก111-444  ให้ใส่ไว้ใน global 

   

  • 1.2  โค๊ดสั่งซ่อน 555-666 เอาไว้ซ่อนคลาส หรือไอดี ใส่ไว้ใน page ต้องแก้ไขเพิ่มเอาเองที่สร้างเพจ

   

  • 2. สร้างคอนเทนต์ แล้วตั้งชื่อclass,ID  (ของblock , widget หรือ htmlอีลีเม้นท์ด้วยtext widget)

 

การซ่อนเอาไว้ก่อนให้ผู้ชมคลิ๊กทีหลัง ต้องใช้ชื่อคลาสถ้าไม่มีคลาสจะใช้ไอดี คือต้องมีไอดีเป็นอย่างน้อย ไอดีหรือคลาสที่ได้ เวลาซ่อนจะต้องไปแก้ไขใน4. ส่วน js script

 

การเรียกให้แสดง-ซ่อน จะเรียกที่ไอดีของคอนเท้นต์  ไอดีที่ได้เอาไปใช้ใน3. a href=”#ชื่อไอดี” 

   

ตั้งชื่อ class หรือ id ตรงไหนได้บ้าง?

    • 2.1  บล็อก    เพิ่มคลาสที่บล็อก   (โครงสร้างเพจ) เช่น class=”toggle-pui”
    • 2.2  วิธเจ็ท    ID สร้างไอดีออโต้เอาไว้แล้ว เช่น id=”text-widget-122334655″ แต่ไม่มีคลาสเฉพาะทาง
    • 2.3  สร้างเอง  สร้างไอดีและคลาสในอีลีเม้นท์หรือtag เช่น div p span button  โดยแอบยัดข้อมูลเข้าไป

ถ้าเป็น span และต้องการแสดงเนื้อหาในบรรทัดเดียวกัน ให้ใส่ class=”tog_span_inl”บังคับ**

   

  • 3.  สร้างลิงค์ ด้วยทูลfunbส่วนเท็ควิธเจ็ท  a ใส่ href=”#ชื่อไอดีที่ต้องการให้ทำคำสั่งเปิดปิด”  ใส่คลาสเพิ่มให้a  ในฟันเนลแบงจ์ จะต้องใช้วิธีการยัดค่าclassให้ a โดยทูลของเบ๊าเซอร์  class=”a_togglep”บังคับ** อยากตั้งชื่ออื่นให้แก้ในโค๊ดjs นะครับ เพื่อให้codeตรวจสอบความถูกต้องและยกเลิกการกระโดดลิงค์ไปยังจุดอ้างอิงที่อยู่ของไอดีนั้น  ต้องคร่อมตัวอักษรเท่านั้น ห้ามคร่อม tag หรืออีลีเม้นอื่นๆ

   

  • 4. คำสั่งให้ซ่อนเอาไว้ก่อน แก้ไขให้ซ่อนข้อมูลในเพจนั้น  แก้ไขโค๊ดjsย่อยๆของแต่ละเพจ ในส่วนของ 555   เช่นเราตั้งชื่อ class=”know1″ และต้องการซ่อน ไอดี heading-widget-123456789 ให้เราแก้ไขเพิ่มในส่วนของ 555 ซึ่งไม่จำเป็นต้องเป็นclass toggle-pui แต่ชื่อคลาส ห้ามใช้ toggle จะซ้ำกับระบบของfunb เป็น

hide_class(‘know1’);  

hide_id(‘heading-widget-123456789’);

//บรรทัดไหนที่ไม่ใช้ให้ใส่ 

// hide_  หรือลบทิ้งไปก็ได้

   รูปแสดงเพจสคริ๊ปอินเตอร์เฟซของฟันแนลแบงจ์ ให้ใส่โค๊ดลงไป

funnel bang how to add javacript and css หน้าเครื่องมือสำหรับการใส่โค๊ด javascript หรือ css เพิ่มเติมในฟังแนลแบงจ์

   ใน funnel bang เราจะใส่ script ที่เป็น java script ถ้าเป็นโค๊ดหลักและใช้เกือบทุกเพจ (ส่วนcode //111-//444 ควรจะใส่ใน global) เลือกในส่วน custom body markup ของ global คือใส่ครั้งเดียวจะมีทั้งเว็บไซต์    หรือถ้าจะใช้ทดสอบแค่เพจเดียว ก็ใส่ด้านล่าง page body markup ได้เลยครับ (ส่วนcode//555-//666 ควรจะใส่ในpage body)   โค๊ดข้างล่าง แก้ไขใหม่แล้วครับอาจไม่ตรงกับรูปส่วนบน สามารถใส่แล้วใช้ได้เลย ส่วนคำอธิบายจะแสดงด้านล่างครับ

   

   

อธิบายคำสั่งของ โค๊ด แสดง-ซ่อน คอนเทนต์ javascript code

   

โค๊ด js หลัก 111-444 ที่ทำหน้าที่อยู่ด้านหลัง ในการเปิดปิด ซ่อนแสดงคอนเท้นต์

ตัวอักษรสีบานเย็น ให้ยัดใส่ในเพจอีดิทเตอร์ส่วนของtext widget ของ funnel bang (funb)

   

  • 111   ใช้ a เปิดปิดคอนเท้นทีละไอดี ด้วยการใส่ href=”#ชื่อไอดี” 

ไม่มีคำสั่งที่ต้องใช้ แต่ a ต้องมีclass=”a_togglep”บังคับ ให้ทำงานได้และป้องกันการกระโดด มีข้อพิเศษอยู่อย่างถ้าต้องการเปิด span ชนิดแสดงต่อในแถวตัวอักษรเดียวกัน ให้ระบุคลาสแสดงอักษรที่ span ถ้าใช้ class=”tog_span_inl”บังคับ ถ้าไม่ระบุจะแสดงเป็น blockหมด 

ตย. a เปิดแบบ block    / /    ตย.a เปิดแบบ inline

   

  • 222   ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อแสดงหรือซ่อนคอนเทนท์ทีละไอดี เป็นแบบ block หรือ inline

ใส่คำสั่ง ใส่ลงไปในลิงค์ หรือปุ่ม 

onclick=”toggle_bl(‘ชื่อไอดี’)”

onclick=”toggle_inl(‘ชื่อไอดี’)”

 กรณีใช้ลิงค์ใส่ href=”#ชื่อไอดี” แต่ไม่ระบุคลาส แล้วใช้onclick เปิดคอนเท้นต์ จะเกิดการกระโดดและเปิดคอนเท้นพร้อมๆกัน ถ้าไม่ต้องการให้เกิดการกระโดดต้องใส่ href=”#” และระบุคลาส a_togglep

ตย. a ใช้คำสั่ง onclick=”toggle_bl(‘ชื่อไอดี’)”    <ลิงค์นี้ก็ใช้ / / 

   

ตย. ปุ่ม ใช้คำสั่ง onclick=”toggle_bl(‘ชื่อไอดี’)” 

   

ตย. span ใช้คำสั่ง onclick=”toggle_inl(‘ชื่อไอดี’)”  

   โค๊ด 111-444 copyโค๊ดเหล่านี้ลงไป โกลบอล คือก๊อปครั้งเดียวได้ทั้งเว็บไซต์ ไม่มีการแก้ไข

<script type="text/javascript">

//111 เรื่มต้น การใช้ลิงค์ เปิดปิดคอนเทนท์ทีละไอดี
// เปิดปิด div block , span inline
  var show_bl = function (elemob) {
      elemob.style.display = 'block';
  };
  
  var show_inl = function (elemob) {
      elemob.style.display = 'inline';
  };
  
  var hide_non = function (elemob) {
    elemob.style.display = 'none';
  };

  var tog_bl_s_h = function (elemob) {
    if (window.getComputedStyle(elemob).display === 'block') {
      hide_non(elemob);
      return;}
    show_bl(elemob);
  };
  
   var tog_inl_s_h = function (elemob) {
    if (window.getComputedStyle(elemob).display === 'inline') {
      hide_non(elemob);
      return;}
    show_inl(elemob);
  };
 // tag a ต้องมี class = a_togglep ใช้ลิงค์ในการเปิดคอนเทนต์
  document.addEventListener('click', function (event) {
    if (!event.target.classList.contains('a_togglep')) return;
    event.preventDefault();
    var obj_sel = document.querySelector(event.target.hash);
    if (!obj_sel) return;
    //---เพิ่มเติมส่วนของ span inline ต้องมี  class= tog_span_inl --
	    var tag_elem = obj_sel.tagName;
	    var cls_elem = obj_sel.className;
	    if ((tag_elem === 'SPAN') && (cls_elem ==='tog_span_inl' )){
		   tog_inl_s_h(obj_sel);
	      }else{
	        tog_bl_s_h(obj_sel);}
  }, false);
  
//111 จบ การใช้ลิงค์ เปิดปิดคอนเทนท์ทีละไอดี---------------


// 222 เริ่มต้น การใช้ onclick ปุ่ม ที่ไม่ใช่<a>เปิดปิดคอนเทนต์ทีละไอดี 
// มีการใข้โค๊ดของ 111 ด้วย
// ถ้าใช้ onclick บนa ให้ใส่ href="#" ใส่คลาส a_togglep เพื่อหลีกเลี่ยงการกระโดด

   function toggle_bl(elemid) { 
   tog_bl_s_h(document.getElementById(elemid));
  }
  function toggle_inl(elemid) { 
   tog_inl_s_h(document.getElementById(elemid));
  }
//222  จบ--------------------


//------------------------------------------------
//333 เริ่มต้น----ใช้ปุ่ม onclick เปิดคลาส เนื้อหาที่ซ่อนไว้ทั้งหมด --- 
//----ใข้กับdivหรือคลาส block ***ลิงค์ปุ่มเปิดไม่หาย
// ถ้าใช้ onclick บนa ให้ใส่ href="#" ใส่คลาส a_togglep เพื่อหลีกเลี่ยงการกระโดด
// มีการใข้โค๊ดของ 111 ด้วย ในกรณีที่ใช้ a
//---- คอนเทนต์คลาส tog_tech1 , tog_feel1
function show_blclass(togclass) { 
var elements = document.getElementsByClassName(togclass);
	for (var i = 0; i < elements.length; i++)
		 elements[i].style.display = 'block';
	}
// ใช้ show_inlclass()  คลาส  tog_span_inl ***ลิงค์ปุ่มเปิดไม่หาย
function show_inlclass(togclass) { 
var elements = document.getElementsByClassName(togclass);
	for (var i = 0; i < elements.length; i++)
		 elements[i].style.display = 'inline';
	}
//333 จบ----------------


//444  เริ่มต้น	
// การซ่อนเนื้อหาใน class toggle-pui ,tog_tech1, tog_feel1 ,tog_span_inl
// การซ่อนเนื้อหา ด้วยid
// ใช้ร่วมกับ ฟังก์ชั่น window.onload แทนการกำหนด css ใน<style>
// มีการใข้โค๊ดของ 111 ด้วย
//     กำหนด css เป็น display:none 	
  var hide_class =function (togclass) {
      var elements = document.getElementsByClassName(togclass);
	for (var i = 0; i < elements.length; i++)
		 elements[i].style.display = 'none';
   }
  var hide_id =function(any_id){
  	  var elements = document.getElementById(any_id);
  	  hide_non(elements);
     }
 // หลังประกาศแล้ว สามารถใช้ได้เหมือนฟังก์ชั่น ในลักษณะonclick="hide_class('abcde')"
//444 จบโค๊ดหลัก ขาดเหตุการณ์ ในการซ่อนคอนเท้นหลังโหลดหน้าเว็บ ให้เลือกใช้ดังนี้
 // window.onload , document.addEventListener , window.addEventListener

</script>

ด้านบนแสดงโค๊ดหลัก 111-444 ที่ใส่ไว้ใน global

  • 333  ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อแสดงคอนเทนท์ทีละคลาส เป็นแบบ block หรือ inline

ใส่คำสั่ง ใส่ลงไปในลิงค์ หรือปุ่ม

onclick=”show_blclass(‘ชื่อคลาส’)”

onclick=”show_inlclass(‘ชื่อคลาส’)”

    กรณีใช้ onclickกับลิงค์ ให้ใส่ href=”#” และระบุคลาส a_togglep เพื่อไม่ให้กระโดด

   

  • 444 เป็นตัวแปรย่อยในการสั่งไอดีหรือคลาสซ่อน ใช้งานใน555 หรือสามารถใช้เป็นฟังก์ชั่น

โดยใช้คำสั่ง onclick ในปุ่มหรือลิงค์(ใส่ href=”#” ระบุ a_togglep) ก็ได้

onclick=”hide_class(‘ชื่อคลาส’);”

onclick=”hide_id(‘ชื่อไอดี’);”

   

   

โค๊ด js หลัก 555 ทำหน้าที่ซ่อนคอนเท้น  666 ทำหน้าที่ยัดคอนเทนต์ที่ไม่เคยโหลดมาก่อน
ตัวอักษรสีบานเย็น ให้ยัดใส่ใน html text widget

ตัวอีกษรสีน้ำเงิน ให้แก้ไขใน scirpt interface ของfunb

   

  • 555 ฟังก์ชั่น window.onload โค๊ดจะสั่งงานเองเมื่อเพจโหลดเสร็จ ให้ทำการซ่อน คลาสหรือไอดี

ไม่มีการใส่คำสั่งในปุ่มหรือลิงค์ใดๆแต่ละคนที่ใช้ต้องแก้ไขเพิ่มเติมเอาเองว่าจะให้ซ่อนอะไร

คำสั่งซ่อนให้แก้ไขโดยตรงบน js สีดำๆ โดยแก้ไขหรือเพิ่มหรือลบหรือใส่//

hide_class(‘ชื่อคลาส’);

hide_id(‘ชื่อไอดี’);

   

  • 666  ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อโหลดคอนเท้นต์จากjavascript ที่เตรียมไว้

1. ใส่คำสั่งลงในปุ่มหรือลิงค์  โดยต้องเตรียมอีลีเม้นท์สักอันด้วยtxt widget แล้วสร้างไอดีในอีลีเม้นท์ p span div ที่ต้องการโหลดคอนเท้นต์ โดยมีลักษณะการโหลดข้อมูลใส่ลงในtagเรียก-innerload   การเปลี่ยนtagนั้นเป็นtagอื่นที่มีข้อมูลอย่างอื่นเรียกใช้-outerload  การใช้ลิงค์ต้องป้องกันการกระโดดด้วย href=”#” class a_toggle_p

onclick=”innerload(‘ชื่อไอดี’)”

onclick=”outerload(‘ชื่อไอดี’)”

ในjs แนะนำให้ใช้ in1,in2 ,out1,out2 สามารถเพิ่มได้ทีหลัง

2. ใส่ข้อมูลที่ต้องการบนjs เป็นภาษาhtmlที่แปลงแล้ว ลงใน ตรงส่วนของไอดีนั้นๆเช่น case out1

case ‘out1’

   tx=’ข้อมูลที่ต้องการโหลด’; 

   โค๊ด 555-666 copyโค๊ดเหล่านี้ลงไปเพจเชิงเดี่ยว คือจะทำเพจหน้าไหนก็ต้องก๊อปแล้วแก้ทุกครั้ง

<script type="text/javascript">
//555 เริ่มต้น ใส่script เอาไว้ในแต่ละเพจ
  
 /* window.onload = hide_cl_id_onload;  
      window.onload เป็นเหตุการณ์ในการเริ่มต้นโหลดหน้าเว็บ อาจใช้งานได้ใน funnelbang
      แต่อาจใช้งานไม่ได้สำหรับ wordpress หรือเว็บอื่นๆ
      แนะนำให้ใช้ 
          document.addEventListener("DOMContentLoaded", function(){
		 //....Executes after DOM is loaded (before img and css)...
		 //....เป็นเหตุการณ์ที่โหลดหน้าเว็บมาได้ระดับนึงแต่ยังไม่โหลดภาพและcss....
		});
	หรือ
	    window.addEventListener("load", function(){
  		  // ....Exectues after everything is loaded and parsed...
  		  //....เป็นเหตุการณ์ที่โหลดหน้าครบพร้อมใช้งานแล้ว....
		});		
      */ 
 window.addEventListener("load",hide_cl_id_onload);
 function hide_cl_id_onload () {
   hide_class('toggle-pui');
   hide_class('tog_tech1');
   hide_class('tog_feel1');
   hide_class('tog_span_inl');
   hide_id('heading-widget-1596702926232');
   hide_id('heading-widget-1596702926230');	  
  }	
  //555 จบ
  
//666 เริ่มต้น  การเรียกข้อมูลและรูปใส่ใน id ในภายหลัง
//ด้วยปุ่ม onclick , a  href="#" ใส่คลาส a_togglep
// มีการเตรียม tag p tag div ว่างๆเอาไว้ก่อนแล้ว ระบุ id 
// อาจมีการใข้โค๊ดของ 111 ด้วย ถ้าใช้ a
// การเรียกจะไม่มีการย้อนกลับไปซ่อน ปุ่มควรจะหายไป
// innerload ใช้ในการเปลี่ยนแปลงข้อมูลใน tag p หรืออื่นๆตามต้องการ

 function innerload(elemid) { 
 	 var tx ;
 	 var e =document.getElementById(elemid);
    switch (elemid) {
        case 'in1':
          tx='' ;
        	       e.innerHTML= tx; break; 
        case 'in2':
          tx='' ;
        	       e.innerHTML= tx; break;
        default:
            alert("no element id");
    }
  }
  
  // outterload ใช้ในการสับเปลี่ยนtagp ,div เป็นอย่างอื่น 
  //  โดยใส่ข้อมูลเป็นชุด p img span ยาวๆได้เลย
  // วิธีการเรียกใช้เหมือน innerload 
   function outerload(elemid) { 
 	 var tx ;
 	 var e =document.getElementById(elemid);
    switch (elemid) {
        case 'out1':
          tx='' ;
        	       e.outerHTML= tx; break; 
        case 'out2':
          tx='' ;
        	       e.outerHTML= tx; break;
        default:
            alert("no element id");
    }
  }
//666 จบ

</script>

   

สร้างเว็บไซต์ที่มี2เลย์เอ้าท์ ใช้ javascript ใน funnel bang

   

เลย์เอ้าท์ในฟันเนลแบงจ์ จะมี2แบบ คือเพจแบบกล่อง style-boxed-layout และแบบเพจแบบกางเต็มความกว้าง style-full-width-layout ในการกำหนดสไตล์เลย์เอ้าท์ จะกำหนดได้ครั้งเดียวและแบบเดียวใน1โดเมนเท่านั้น ซึ่งของผมกำหนดทุกหน้าให้เป็นแบบกล่อง boxed layout สำหรับงานบทความ แต่ในหน้าขาย หรือ ร้านค้า เราอยากให้เป็นแบบ full width layout ซึ่งดูอลังการดึ จะทำไงได้บ้าง?? แต่จะแสดงผลในdesktopเท่านั้น ในมือถือเห็นเหมือนๆกันไม่แตกต่าง

   

funnel bang การปรับ สไตล์การแสดงผล เลย์เอ้า แบบ box หรือแบบ เต็มความกว้างหน้าจอ หรือให้มีสองแบบในเว็บไซต์เดียวกัน

   

เราสามารถใช้ js ยัดเปลี่ยน class เพื่อเปลี่ยน เลย์เอ้าท์ได้หลังจากโหลดเพจเสร็จ ด้วยการให้ โค๊ดค้นหา อีลีเม้น ที่มีclass ดังกล่าวแล้วสับเปลี่ยนคลาส ให้เป็นอีกแบบนึง โดยใส่โค๊ดในส่วนของแต่ละเพจที่ต้องการเปลี่ยนสไตล์ดังนี้

   

// เปลี่ยน div  classs style-boxed-layout >style-full-width-layout
<script type="text/javascript">
  function change_tofullwidth_pagestyle(boxclass) { 
    var elements = document.getElementsByClassName(boxclass);
    for (var i = 0; i < elements.length; i++){
      elements[i].className = elements[i].className.replace(/\bstyle-boxed-layout\b/g, "style-full-width-layout");
    }
  }
  change_tofullwidth_pagestyle('style-boxed-layout');

/*elements[i].classList.add("style-full-width-layout");
elements[i].classList.remove('style-boxed-layout'); */  //.ใช้ได้นะ
//  /bไว้ข้างหน้าคำ หาคำนั้นตอนเริ่มต้นคำ  , /bไว้ข้างหลังคำ หาคำนั้นตอนท้ายคำ
// , g ถ้ามีให้เปลี่ยนทั้งหมด ถ้าไม่มีให้เปลี่ยนครั้งเดียว

</script>

ถ้า เซ็ทดีฟอลท์ เป็น full width อยากเปลี่ยน เป็น boxed ให้แก้บรรทัดนี้ จะเห็นว่าแค่สลับกัน เป็น

   

elements[i].className = elements[i].className.replace(/\bstyle-full-width-layout\b/g,” style-boxed-layout“);

   

   

การแก้ไข menu navigator แสดงสีปุ่มให้ถูกหน้าด้วย js

   

   เมื่อเราใช้ menu widget  สร้างเมนูสำหรับให้ผู้ชมคลิ๊กไปหน้าต่างๆ ซึ่งสะดวกมาก แต่จะมีบางครั้งที่มันแสดงผลของสีปุ่มของเมนูที่ถูกเลือกว่าเรากำลังอยู่ในหน้าใดๆนั้นไม่ถูกต้อง ทำให้ผู้ชมอาจสับสนว่ากำลังอยู่ในหน้าไหนกันแน่ และจะเลือกไปหน้าอะไรต่อดี การเลือกสีปุ่มนั้นในplatformจะสร้างโค๊ดที่ลิ้งค์กับหน้าที่มีอยู่จริงที่เราสร้างไว้เท่านั้น เช่นเราสร้าง home ไว้เป็นหน้าแรก ถ้าเข้าเพจโฮมสีปุ่มจะแสดงถูกต้อง แต่พอเข้าหน้าโดเมนหลักหน้าแรก สีปุ่มกลับไม่มี ซึ่งวิธีแก้ไขให้ใช้ javascript กำหนด ปุ่ม 0, 1, 2, 3 …. ให้แสดงสีปุ่มที่กำลังอยู่ในหน้าเมนูนั้น

   

funnelbang ปุ่มลิ้งค์ในnavigator นาวิเกเตอร์ ไม่ขึ้นสีไฮไลท์ ในหน้าแรก แก้ไขอย่างไร

   

ในภาพด้านบนแสดงสีของเมนูวิธเจ็ท ว่าเรากำลังอยู่ในหน้าเมนูใด จะแสดงสีเป็นปุ่มสีเขียว เมื่อมันแสดงไม่ถูกต้อง จึงต้องใช้ js แก้ไข หลังโหลดเสร็จ จะทำการยัดคลาสเข้าไป ที่ปุ่ม0 คือปุ่ม home ยัดคลาสเข้าไปที่ li เป็น

   

ในการนี้จะยัด เป็น <li class=”active”>บทความ Home</li> แทนโดยใช้ js หาli ที่อยู่ในโครงสร้างเป็น div class=”menuWidget”  แล้วระบุว่า li อยู่ที่ปุ่มที่เท่าไหร่ใน ใน divนั้น แล้วทำการยัดคลาสลงไป

ให้ทำการคัดลอก js ลงในแต่ละเพจที่มีปัญหาแล้วกำหนดปุ่มลงไป

   

<script type="text/javascript">
  function correct_color_menuwidget(a) {
    var x = document.querySelectorAll("div.menuWidget > div > div > nav > ul > li");
    x[a].classList.add("active");
  }
  correct_color_menuwidget(0);

// แก้ไขการให้สี เมนู ให้ตรงกับชื่อเพจ ปัจจุบัน เปลี่ยน 0,1,2,3,4   correct_color_menuwidget(0)
//  เช่น pui108diych.com/  ไม่ให้สีเมนูที่ถูกต้อง แต่ /home ให้สี

</script>

ในที่นี้ เราใส่ correct_color_menuwidget(0); ใส่ไว้ในเพจ home เพื่อให้เมื่อผู้ใช้งานโหลดหน้าแรกขึ้นจะทำงานอย่างถูกต้อง เราสามารถเปลี่ยน จาก 0(home) เป็น 1(ติดต่อ), 2..5. เป็นเลขอะไรก็ได้ที่มีอยู่ในเมนูนั่นเอง โดยปุ่มแรกจะขึ้นด้วย 0ให้เราแก้ไข โดยใส่คำสั่งจาก 0เป็น1  หรือจะให้สีทุกปุ่มทำงานก็ใส่เพิ่มเรียงกันไปเป็นต้น

correct_color_menuwidget(0);

correct_color_menuwidget(1);

correct_color_menuwidget(2);

   

   

   

   

   

ระบบ ร้านค้า สโตร์ เซลฟันเนล บนโดเมนฟันแนล ของfunnel bang

   

  ในที่นี้จะพูดถึงเยอะ ในส่วนของระบบร้านค้าอัตโนมัติบนฟันเนล ซึ่งไม่ค่อยมีคนทำกันบนฟันเนลโดเมน (แต่ทำบนเว็บไซต์โดเมน ซึ่งเทมเพลทบนเว็บไซต์จะทำร้านstoreง่ายกว่ามาก แต่จะไม่รองรับฟันเนลเลย) จะสนใจโดยเฉพาะในส่วน check out  เนื่องจากระบบการขายในเซลล์ฟันเนล1หน้า จะใช้วิธเจ็ท check out สำหรับสินค้าเฉพาะ1รายการ และปรับตั้งค่าต่างๆได้ไม่ยากนัก 

   ระบบขายสินค้าบนแพล็ทฟอร์มนี้ ทำได้2แบบ คือ

   

1. sale funnel หรือกรวยขาย คือการให้ลูกค้าเดินตามเส้นทางหรือสคริ๊ปที่ทางผู้ขายจัดไว้ คือให้เข้าหน้าขายเฉพาะหนึ่งสินค้าซึ่งจะไม่มีอย่างอื่นให้ว่อกแว่ก ไม่มีลิงค์ออกไปที่อื่น โดยให้ลูกค้ารับข้อมูลทางเดียวแล้วรีบตัดสินใจซื้อทันที กระตุ้นด้วยหลักอะไรก็แล้วแต่ที่ลูกค้าเห็นว่าคุ้มค่า สุดท้ายคือต้องการให้ลูกค้าcall to action คือให้ซื้อบน เซลล์ฟันเนล ถ้าไม่ซื้อก็มีสเต็ปต่อไปเป็นคือเสนอสินค้าตัวอื่น ถ้าซื้อก็ยังมีข้อเสนอเพิ่มมูลค่า เป็นต้น ซึ่งเซลล์ฟันเนลต้องอาศัยระบบสโตร์ หรือ (store system) ทำงานอยู่เบื้องหลัง

   

2 ร้านค้าอัตโนมัติ หรือสโตร์ คือเพจที่แสดงสินค้าให้เลือกซื้อได้ทันทีกี่ไอเทมก็ได้ ขายแบบแบกะดิน มีระบบการจัดการการออเดอร์ ตย.คล้าย ร้านค้าบน เทพช็อบ  แต่ที่funbจะต้องเปิดใช้ระบบสโตร์(store system) และใช้เพจระบบในการจัดการขาย การกรอก ยืนยันการจ่ายเงิน ระบุที่อยู่จัดส่ง เป็นต้น แต่ละเพจระบบต้องทำการปรับแต่งรูปแบบ ให้ทำงานได้นั้น มีความยากกว่าLnwshop มาก  

   

   

ชี้ปัญหา การตั้งค่า page checkout (auto store) บนโดเมนฟันแนล 

   

     แต่พอเราตั้งค่าเป็นร้านค้าออโต้บนโดเมนฟันแนล คนซื้อซื้อทีละหลายไอเทม แล้วจึงรวมจ่ายเงินทีเดียว การใช้งานเช็กเอ้าท์ของระบบอัตโนมัติที่มีมาให้เดิม(checkout auto store by default) เมื่อเริ่มต้นเปิดใข้งานเพื่อตั้งค่า ทำให้ไม่มีการระบุเบอร์โทรศัพท์ และการอัพโหลดสลิบ หรือเงื่อนไขการโอนเงินเป็นต้น จำเป็นที่ต้องเซ็ทให้เป็นระบบการขายแบบ1สินค้าแล้วทำการย้อนกลับให้เป็นแบบเช็กเอ้าท์ออโต้แบบหลายสินค้าโดยไม่มีรูปแบบให้เห็นอีกด้วย ซึ่งบางทีจะสับสนมาก ซึ่งถ้าทำการปรับแต่งเสร็จ ในbuilder ก็ยังมีหน้าตาคล้ายค่าเริ่มต้นคือไม่แสดงผลอะไรเลย เหมือนภาพข้างล่าง ทำให้ต้องขุดคุ้ยวิธีการ และทำการปรับแต่ง js โดยมีจุดประสงค์ให้ลูกค้าแยกจุดสนใจและลำดับการอ่านและกรอกชัดเจน ให้ใช้งานได้ถูกใจตามต้องการ 

funnel bang ปัญหาของการปรับแต่ง check out store ไม่ขึ้นตามต้องการ  

หน้าบนเป็น builder ใน system pages ชื่อ checkout เมื่อเปิดระบบร้านค้าแล้วไม่ทำการปรับแต่งอะไรเลยจะแสดงผลดังรูปล่างซึ่ง มีข้อมูลของลูกค้าไม่ครบถ้วนและไม่ได้บอกให้ลูกค้าโอนอย่างไรที่ไหนเป็นต้น จำเป็นต้องทำการปรับแต่งให้ใช้งานได้ตามต้องการ URL ที่ใช้งานจริงและแสดงผลจริงจะใช้เป็น …/store/checkout ต่างกับ urlที่แสดงในหน้า builder ซึ่งมันจะไม่ url ดังกล่าวเวลาใช้งานจริง

   

   

ขั้นตอนคร่าวๆในการเปิดระบบstore  คือ กดเปิดระบบสโตร์ ข้างปุ่ม Builder แดงๆตามรูปบน คือ Store และทำการเซ็ทค่าที่จำเป็น ในการขาย เช่น ข้อมูลร้านค้า สินค้า วิธีการจ่ายเงิน วิธีส่งสินค้า โค๊ดส่วนลด เป็นต้น ระบบเหล่านี้ทั้งหมดจะอยู่ที่หลังร้าน  ส่วนเพจระบบที่ใช้ติดต่อการขายกับลูกค้านั้นจะมี หน้าร้าน เราต้องตั้งชื่อเองว่าจะใช้ชื่ออะไร เช่น shop , store เป็นต้น การลิงค์ไปที่หน้าร้าน สมมติว่าใช้ชื่อว่า store เพจหน้าร้านขายจะมีลิงค์เป็น

   

โครงสร้างระบบหน้าแสดงผลของสโตร์ อัตโนมัติบนฟันเนล  System Pages of store

เวลาใฃ้งานจริงแสดงผลจริงจะมี URL คือ

1.  pui108diych.com/store

      (Store Catalog เทมเพลท)

   คือหน้าร้านหน้าแรกจะอยู่ในหมวดหมู่แสดงสินค้าทั้งหมดที่มี แบกะดินว่ามีอะไรขาย เมื่อเข้าไปแล้วให้ทำการปรับเทมเพลทร้านให้สวยงามตามต้องการ จะใส่หัวheader หรือ footer ได้ตามต้องการ ในกรณีที่มีหมวดหมู่ เช่นfood หน้าจะจำลอง URL เป็น ../store/category/food เป็นต้น

   

2. หน้าแสดงข้อมูลแต่ละผลิตภัณฑ์ ต้องทำการตั้งชื่อ product page url ให้สอดคล้องกับชื่อสินค้าจริงซึ่งแต่ละสินค้าจะมีชื่อไม่ซ้ำกันเพื่อให้แสดงผลกันคนละหน้าได้ ต้องเป็นภาษาอังกฤษ ใส่ตอนเพิ่มสินค้าจะมีรายละเอียด urlดังกล่าว ในหน้า builder ใช้แค่ product ซึ่งไม่มีการแสดงผลใดๆเลย ทำการปรับรูปแบบการแสดงผลเอาเองให้ใช้ได้ตามต้องการ ปรับ css เพิ่ม header footer

   

    pui108diych.com/store/product-page-url

   

funnel bang ทำความเข้าใจลิงค์ ของ store ในหน้าต่างๆแสดงผลสินค้าอย่างไร

   

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

หน้าร้าน Store Catalog  >เลือก แต่ละProduct รายละเอียดสินค้า> Cart รถเข็น > Checkout กรอกและจ่ายเงิน ซึ่ง ระบบฟันเนลแบงจ์ จะกระโดดข้ามขั้นได้หมด คือที่หน้าร้านก็ซื้อได้เลย แล้วกระโดดไป เช็กเอ้าท์ก็ได้ รถเข็นบางทีไม่จำเป็น ถ้าไม่ได้มีลิงค์เอาไว้ก็ไม่ได้ใช้ เพราะที่เช็กเอ้าท์ก็มีรถเข็น เป็นต้น

   

3. pui108diych.com/store/cart

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

   

4. pui108diych.com/store/checkout

   เป็นหน้าสำหรับลูกค้าจะทำการตรวจสอบจำนวนราคาสินค้า กรอกข้อมูลจัดส่ง และทำการจ่ายเงิน  

   

funnel bang สินค้าใน store แสดงผลตาม category ต่างๆ

   

ตัวอย่างของเพจ pui108diych.com/store จะแสดงสินค้าทั้งหมด  ในรูปทำการปรับแต่งแล้ว เพิ่มheaderข้างบน ในส่วนสีม่วงอ่อนทั้งหมดจะเป็นบล็อกที่มีวิธเจ็ทฝังเฉพาะของเพจ Store catalog เท่านั้น ห้ามไปลบทิ้งเด็ดขาด ปรับได้แต่สไตล์การแสดงผล ปรับรูปแบบการค้นหาด้วยราคา และ css เท่านั้น   ถ้ามีหมวดหมู่อื่นๆจะแสดง ../store/category/name ซึ่งเป็นเทมเพลทหน้าเดียวกันแต่เป็นการแสดงในลักษณะurlจำลองว่ามีหมวดหมู่

   

ขั้นตอนการตั้งค่า เพจ checkout ในstore ร้านค้าออโต้

   

ในหน้า pui108diych.com/store/checkout หน้า checkout เมื่อต้องการให้ระบบทำงานอย่างถูกต้อง ให้ลูกค้า กรอกข้อมูลที่ต้องการในการจัดส่ง ทำใบเสร็จรับเงิน และอัพโหลดสลิปจ่ายเงินในขั้นตอนเดียวกัน ในหน้านี้ยังแสดงทั้งระบบตะกร้าสินค้าด้วยในหน้าเดียวกัน ซึ่งสะดวกมาก ถ้าระบบเช็กเอ้าท์สามารถทำงานได้ตามที่ต้องการ การเซ็ทค่าร้านค้าให้ทำงานอย่างร้านค้าในเทพช็อป หรือมาร์เก็ทเพลสอื่นๆที่มีระบบตะกร้าและระบบการคิดเงินกรอกฟอร์ม ขอเรียกว่า ร้านค้าอัตโนมัติ บนฟันเนลโดเมน โดยเราทำการเพิ่มข้อมูลสินค้าต่างๆที่หลังร้าน ระบบที่เหลือจะขึ้นมาเองโดยที่ไม่ต้องเซ็ทเป็นหน้าๆสำหรับขายเหมือนเซลล์ฟันเนล

   

ขั้นตอนที่ให้checkout มันแสดงผลอย่างถูกต้อง จะทำดังรูปข้างล่าง

   

1 funnel bang ขั้นตอนการตั้งค่า checkout store widget และปรับแต่ง อย่างละเอียด2 funnel bang ขั้นตอนการตั้งค่า checkout store widget และปรับแต่ง อย่างละเอียด

   

ให้ปรับตามขั้นตอน 1-5 ตามรูป โดยเริ่มจาก

   

1-2. ปรับระบบตะกร้าออโต้ cart checkout เป็นตะกร้าแบบ product select (เลือกที่ละสินค้าซึ่งใช้กับเซลเพจ) แล้วเลือก 1-step checkout  

   

3. ปรับรูปแบบ ตกแต่ง สี มุม ปุ่ม ให้ได้ตามที่ต้องการ

   

4. การ setting  เพิ่ม ช่องกรอกเบอร์โทรมือถือ , ช่องอัพโหลดสลิป ตามต้องการ

   

5. ปรับตะกร้าแบบ product select โดยดับเบิ้ลคลิ๊กที่หน้านั้น ตรงส่วนไดก็ได้ จะมีเมนูป๊อปอัพออกมา เลือกกลับเป็น cart checkout แบบตะกร้าออโต้เหมือนเดิม เซฟ

   

   

วิธีการปรับแต่ง หน้า checkout ด้วย js และ css

   หน้า checkout แบบออโต้ เมื่อผ่านการปรับแต่ง js และ css เพิ่มแล้ว

   

funnel bang หลังการปรับตั้ง checkout store ด้วย javascript และ css

   

ขั้นต่อไปคือการปรับแต่งด้วย js , javascript และ css เนื่องจาก วิธเจ็ท checkout จะมีรูปแบบfix คือปรับแต่งอย่างอื่นไม่ได้มากกว่าขั้นตอนด้านบน เนื่องจากการสร้างตารางที่ผูกกับวิธเจ็ทค่อนข้างซับซ้อน เลยตัดรูปแบบการตกแต่งคำพูดที่ให้ร้านค้าเขียนเพิ่มได้เองบนวิธเจ็ททิ้ง โดยอาศัยการอ่านข้อมูลที่เซ็ทเอาไว้ที่่หลังร้านมาแสดง หรือแปลข้อมูลจากอังกฤษเป็นไทยเข้าใจว่าทางfunnel bang คงใช้งานระบบเดิมที่ไปเช่าเซิฟฟันเนลของเมืองนอกที่เป็นภาษาอังกฤษตรงส่วนตกแต่งน่าจะใช้การใส่ โค๊ด หรือjsเพื่อแปลไทยเป็นอังกฤษ และตรงส่วนอื่นๆก็ทำในทำนองเดียวกัน ไม่ได้เขียนโปรแกรมตรงส่วนวิธเจ็ทcheckoutใหม่แต่อย่างใด อาศัยการใส่สคริ๊ปบางอย่างปรับแก้อินเตอเฟสให้เหมาะกับคนไทย แต่ไม่ได้เขียนโครงสร้างใหม่อย่างแน่นอน

   

ในส่วน css ให้ใส่ใน page css ดังนี้

   

.col12{width:50%;}
.col8{width:50%;

}  //ทำให้อัตตราส่วน 50% ดูสวยกว่า
.widget-form .field-invalid select,
.widget-form .field-invalid input,
.widget-form .field-invalid textarea,
.field-with-error {
 border:2px solid #e25141 !important;
}
  //ส่วนนี้ทำให้กรอบเออเร่อสีแดงเป็น2px แทน

   

จากการทดลองใช้ js แปลงข้อมูลที่ต้องการลงไป พบว่่าส่วนโค๊ด js3 มีการเขียนทับโดยฟันเนลแบงจ์-jsเพื่อโหลดข้อมูลมาทับหลังใช้โค๊ดjs3 ทำให้เปลี่ยนแปลงข้อมูลไม่ได้ ถ้าใช้้ method innerhtml เนื่องจาก  span ใน label จะมีส่วนฟิกซ์ <span data-role=”button-label”> </span> innerhtml จะถูกjsของฟันเนลแบงจ์เขียนทับทุกครั้ง เข่นเดียวกันกับ <span data-role=”bankInfo”> </span> 

จึงไม่สามารถใช้ js3 ด้วย .innerHTML = ได้ ต้องใช้ .outerHTML  และเปลี่ยนข้อมูลใน data-role เป็นอย่างอื่นไม่งั้นจะถูก js-funb เขียนทับทุกครัง

   

ให้ใส่ js code ส่วน body ดังนี้ ข้อมูลต่างๆต้องเอาไปแก้ไขเอง

   ซึ่งค่อนข้างยากในการอธิบายโค๊ดเหล่านี้ ถ้าไม่มีพื้นฐาน

   

1. ฟังก์ชั่น เพิ่มคลาส เข้าไป ด้วยการหาอีลีเมนท์ ด้วย queryselectorAll

 ระบุ

 a คือค่าที่ต้องการให้หาอีลีเม้นท์นั้น  

 b คือตำแหน่งในเพจนั้นถ้าเพจนั้นหามาได้หลายอีลีเมนท์ ถ้าระบุ0ก็มีตำแหน่งแรกที่ค้นได้ ถัดมาก็ 1 2 3…

 c คือชื่อคลาสที่ต้องการเพิ่มเข้าไปในอีลีเม้นท์ เพื่อให้ง่ายแก่การระบุตำแหน่งในภายหลังโดยไม่ต้องใช้idแต่ใช้คลาสระบุตัวแทน เป็นต้น

   

2. ฟังก์ชั่น แก้ไขข้อมูลภายในhtml หรือ เปลี่ยนทั้งหมดคือouterhtml ใช้ตัวแปรส่งคล้ายกับ1.

   

<script type="text/javascript">
  
  function add_class_inelement_have_data_attrb(a_data_value , b_position, c_class) {
    var x = document.querySelectorAll(a_data_value);
    x[b_position].classList.add(c_class);
  } 		

  function inner_change0(elem_in_elemclass, b_position, inner_html_value) { 
    var x = document.querySelectorAll(elem_in_elemclass);
    x[b_position].innerHTML=inner_html_value;
  }

  function outer_change0(elem_in_elemclass, b_position, outer_html_value) { 
    var x = document.querySelectorAll(elem_in_elemclass);
    x[b_position].outerHTML=outer_html_value;
  }

  //js1 เริ่มต้น
  add_class_inelement_have_data_attrb("[data-role='member']",'0',"div-member");
  add_class_inelement_have_data_attrb("div.div-member > input ",'1',"input-email");
  document.getElementsByClassName("input-email")[0].placeholder = "อีเมล (สมาชิก ล็อกอิน)";
  document.getElementsByClassName("input-email")[0].style.backgroundColor = "#BCE9F9";
  ///////////------js1 จบ

  //js2 เริ่มต้น	
  add_class_inelement_have_data_attrb("[data-role='billing-info']",'0',"div-billing-info");
  inner_change0("div.div-billing-info > label > span",'0', "ออกใบเสร็จ ในนามบริษัท ดังนี้");
  add_class_inelement_have_data_attrb("[data-role='password']",'0',"div-password-info");
  inner_change0("div.div-password-info > label > span",'0', "ตั้งpassword สมาชิก-สั่งซื้อง่าย");
  add_class_inelement_have_data_attrb("div.div-password-info > label",'0',"label-password-info");
  document.getElementsByClassName("label-password-info")[0].style.backgroundColor = "#B6ECFF";
  ///////////-----js2 จบ

  //js3 เริ่มต้น	
  add_class_inelement_have_data_attrb("[data-payment='bank']",'0',"label-paymet-bank");
  document.getElementsByClassName("label-paymet-bank")[0].style.backgroundColor = "#262626";
  outer_change0("label.label-paymet-bank > span",'0', '<span data-role="pui-button-label" style="color: rgb(204, 204, 204);">โอน เข้า ธนาคาร ชื่อบัญชี <br> พรเทพ เฉลิมพันธ์พิพัฒน์</span>');

  outer_change0("label.label-paymet-bank > span",'1', '<span class="radio-info" data-role="pui-bankInfo" style="padding-top:5px;"><span style="font-size: 20px; padding-top:10px; color: rgb(255, 255, 255);"><img style="width:35px;" src="//content.web-repository.com/s/3450688170096799/uploads/decorate/KBANK-8347289.jpg" data-filename=""> &nbsp;KBANK &nbsp; 0103399858 <br><img style="width:35px;" src="//content.web-repository.com/s/3450688170096799/uploads/decorate/PROMPTPAY-8347291.jpg" data-filename=""> &nbsp;พร้อมเพย์  &nbsp;0897979411</span></span>');
  ///////////-----js3 จบ

</script>

   

    

   

   

     

   

   

การเพิ่มวีดีโอด้วย Video Widget และ Embed Widget

funnel bang video and code widget in add widet window

   

      การเพิ่มวีดีโอลงในเพจ เช่น ยูทูป โดยใช้่ Video widget หรือ EMBED widget โดยเราสามารถใส่ลิงค์ดิบๆของยูทูปลงไป https://youtu.be/DIGqBb3iZPo   หรือ  https://www.youtube.com/watch?v=DIGqBb3iZPo   ก็ได้วีดีโอแบบเต็มจอแบบ16:9 เต็มความกว้าง ได้ทันทีดังข้างล่างนี้  ซึ่งสะดวกมาก วิธเจ้ททั้งสอง สามารถใส่ภาพซ้อนลงทับวีดีโอได้   สามารถปรับชิดขวาหรืออยู่ตรงกลาง และเลื่อนปรับขนาดต่างๆด้วยมือได้ทันที แต่เมื่อต้องการปรับขนาดจอให้เล็กลงแต่คงอัตราส่วนเช่น 16:9 ต้องปรับมือและคำนวนเอาเองนะครับ ส่วนของมือถือจะแสดงเต็มความกว้างอยู่เสมอ 

   

2อันนี้เป็นรูป แสดงผลจากวิธเจ้ทวีดีโอ บนฟันเนลแบงจ์เซิฟเวอร์ ส่วนบนเวิร์ดเพลสเมื่อย้ายข้อมูลมาแล้วเป็นแบบข้างล่าง กลายเป็นอะไรเล็กๆแทน
ตัวนี้ใช้ video block ของ เวิร์ดเพลสให้ผลเหมือนกัน โดยต้องใส่เป็น embed https://www.youtube.com/watch?v=DIGqBb3iZPo

     เนื้อหาวีดีโออนุญาตการใช้ซ้ำ มาจาก– Light blub filament — youtube CC by engineerguy

ข้างบนเป็นการเพิ่ม ด้วย widget video  โดยใส่ลิงค์ใช้งานได้ทันที แต่ไม่สามารถใส่พารามิเตอร์ต่างๆได้ วิธเจ็ทจะตัดออกโดยอัตโนมัติ

https://youtu.be/DIGqBb3iZPo  

https://www.youtube.com/watch?v=DIGqBb3iZPo    

   

   

   วีดีโอข้างบนใช้ embed widget โดยทั่วไปจะใส่เป็น<iframe></iframe> ซึ่ง เป็นเอ็มเบ็ธโค๊ดที่มาจากเว็บต่างๆ อาจเป็นสไลด์หรืออะไรก็ได้  ส่วนใหญ่ควรก็อบปี้โค๊ดมาเป็นลักษณะดังกล่าว 

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/DIGqBb3iZPo” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

   

   

เมื่อเราเขียนเรื่องที่เกี่ยวข้องถึงเนื้อหาในวีดีโอ เราสามารถใส่วีดีโอของผู้อื่นแล้วเด้งลิงค์ไปที่youtubeของเขา  ทำอย่างไรจึงไม่ผิดลิขสิทธิ์ และเจ้าของวีดีโอได้ประโยชน์

       การเขียนคอนเท้นท์ที่รวมเรื่องเฉพาะด้านและบางครั้งเราเขียนอ้างอิงถึงเนื้อหาในวีดีโอของคนอื่นๆที่เราไม่ใช่เจ้าของลิขสิทธิ์ โดยที่เราไม่ได้ทำสินค้าแข่งหรือทำให้เขาเสียประโยชน์ แต่เราอยากให้ขึ้นเป็นรูปวีดีโอที่โหลดโดยยูทูปก่อนกดเล่นจากยูทูปปรากฎอยู่บนเว็บเรา เมื่อผู้อ่านต้องการเพิ่มเติมเนื้อหาทำการกดเล่นวีดีโอ เว็บจะส่งลิงค์เปิดอีกหน้าจอของยูทูปโดยตรงโดยไม่มีการเล่นเนื้อหาวีดีโอบนเว็บไซต์ของเรา การทำแบบนี้เพื่อให้คอนเท้นท์ของเราดูน่าสนใจและผู้อ่านสามารถหาความรู้ต่อยอดไปได้ทันทีแทนที่จะเป็นลิงค์เฉยๆและไม่เป็นการละเมิดลิขสิทธิ์ทั้งภาพและเนื้อหาวีดีโอของผู้อื่น

   

     ใช้ วิธเจ็ทโค๊ด แล้วใส่โค๊ดhtml ลงไป (**ใช้ได้กับทุกเว็บที่ใส่htmlได้ )  ( **ในส่วนของ funnel bang ให้ทำการเซฟ1ครั้งแล้ว reload web อีกที เนื่องจากdivเป็น relative และขยายเต็ม100% ทำให้แสดงผลไม่สมบูรณ์ในครั้งแรก) จะได้วีดีโอดังข้างล่างทันที เป็นวีดีโอแบบ16:9 สามารถเลื่อนปรับขนาดด้วยมือและคงรูป16:9 ตลอดเวลาอีกด้วย แต่วีดีโอนี้ไม่ได้รับอนุญาตให้เล่นหรือแสดงบนเว็บนี้ จึงต้องระบุให้ชัดเจนทุกครั้ง เป็นแค่การส่งลิงค์ออกไป เราไม่ได้เก็บภาพแคปหน้าจอลงเว็บเรา และเจ้าของวีดีโอได้ประโยชน์โดยตรง

 ระบุเนื้อหาเรื่อง ของใคร และระบุ >>VDO link only , no permission from owner 

funnel bang code widget button

   

ใช้ CODE Widget แล้วใส่ code ตามนี้ แล้วเอารูป go to youtube ไปไว้ที่เซิฟเวอร์ตัวเองด้วยนะครับถ้าใช้ที่อื่นๆ ในที่นี้ ลิงค์รูปป้ายแดง ของผมคือ https://content.app-sources.com/s/3450688170096799/uploads/article9000/br-2787598.gif ส่วนของคุณก็ไปหาที่เก็บเอานะครับ  ทุกครั้งที่เราต้องเปลี่ยนเป็นวีดีโอของyoutubeคือ v8mCoAfnAQo

อธิบายสั้นๆคือ มีdivดำเอาไว้เว้นช่องไฟรอบๆ มีคอนเทนเนอร์divสีชมพูเป็นตัวปรับขนาด16:9    iframe สีน้ำตาลปรับตามขยาย100% คอนเทนเนอร์divสีเขียวทำหน้าที่สร้างเลเยอร์ซ้อนทับiframeให้มีเหตุการณ์ถ้ากดแล้วลิ้งไปหน้าเว็บแทนการกดiframe    ส่วนภาพimgสีแดงเป็นลูกเล่นขยายภาพบอกว่าให้ไปยูทูป  

ตัวอย่างโค๊ด

 ระบุเนื้อหาเรื่อง ของใคร และระบุ >>VDO link only , no permission from owner 


<div style=”padding:2.8% 1% 2.8% 2%; position: relative;”>

<div style=”padding-bottom: 56.25%; height: 0; position: relative;”>

    <iframe width=”100%” height=”100%” style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” src=”https://www.youtube.com/embed/v8mCoAfnAQo” frameborder=”0″>

    </iframe>

    <div style=”width: 100%; height: 100%; position: absolute; top: 0px; z-index: 100; cursor: pointer; padding-left: 0px;” onclick=”window.open(‘https://www.youtube.com/watch?v=v8mCoAfnAQo‘)” onmouseover=”cursor: pointer;”><img style=”position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);” onmouseover=”this.style.height = ’90px’; this.style.width = ‘128px’;” onmouseout=”this.style.height = ’43px’; this.style.width = ’61px’;” src=”https://content.app-sources.com/s/3450688170096799/uploads/article9000/br-2787598.gif” alt=”” width=”61″ border=”0″ height=”43″ />

    </div>

</div>

</div>


ในกรณีที่ต้องการให้ทั้งมือถือและdesktop ลดขนาดวีดีโอลงเหลือประมาณ70% ให้ใส่   

จาก padding:2.8% 1% 2.8% 2%; (กว้าง97%)  เป็น 

       padding:2.8% 15% 2.8% 15%  (กว้าง70%)

 ซึ่งมีความหมายว่าเพิ่มช่องว่างซ้ายขวา ข้างละ15%+15% =30% พอดีครับ ส่วนจอ 16:9 จะบังคับโดย

       padding-bottom: 56.25%; เหมือนเดิมครับ 

   

      

     

      

      

      

จบ Funnel Bang แต่เพียงเท่านี้ จากการใช้งาน 1ปี   7/7/63 – 6/7/64

วันที่เขียนเพิ่มเติม 22/7/2564

   

       รีวิว Review Funnel Bang

   

       ข้อที่ดีที่สุดของฟันเนลแบงจ์ ที่ผมจะแนะนำ คือ เป็นแพลทฟอร์ม ในการสร้างเว็บไซต์ฟันเนล หรือมีทูลวัดผลทางการตลาด สร้างหน้าเพจที่มีกรวยการขาย (การหลอกล่อ กล่อมเกลาลูกค้าให้สนใจให้ทำตามที่ผู้ซื้อต้องการ ขึ้นกับไอเดีย) โดยนำเสนอในเรื่องบันไดคุณค่า(อันนี้น่าจะต้องเรียนเพิ่มเติม)  โดยจุดเด่นที่สุดของแพลทฟอร์มที่ไม่ใช่เรื่องไอเดียการตลาด แต่มันก็คือ แพลทฟอร์มใช้serverที่รองรับการใช้งานของคนจำนวนมากโดยที่เข้ามารุมคลิ๊กดูโดยไม่ล่ม เพราะเขาใช้เซิฟเวอร์ของอเมซอนเว็บเซอร์วิส(AWS) และเข้าใจว่าตัวแพลทฟอร์มสร้างระบบข้อมูลที่พิเศษกว่าโดยแต่ละหน้าของฟันเนลประกอบด้วยบล็อกย่อยๆที่ไม่มีใครเป็นเจ้าของจึงไม่จำกัดแบนด์วิธต่อวินาทีหรือจำกัดI/Oการขอเข้าใช้งานดึงข้อมูลของแต่ลูกค้าของuserที่เข้ามารุมคลิ๊กดูโปรโมชั่นต่างๆ  แต่ก็ยังจำกัดแบนวิธต่อเดือน เช่นไม่เกิน60GBในชั้นราคาบิสสิเนส จึงเหมาะสำหรับการทำหน้าเพจสำหรับยิงแอ๊ดเรียกลูกค้าเข้ามารุมซื้อ เป็นการทำหน้าโปรโมชั่นสั้นๆ 1-2วัน หรือ1-2อาทิตย์เป็นต้น    ทางfunb ยังเพิ่มระบบเสริมอำนวยความสะดวกอีกมากมายสำหรับผู้ประกอบการหรือเอเจนซี่ รวมถึงการมีคนรับจ้างทำฟันเนล ทำวีดีโอ ก็หาได้ในกลุ่มเหล่านั้น แต่ไม่ใช่จุดเด่นที่สุดของแพลทฟอร์ม และอื่นๆอีกมากที่ค่อนข้างดี(ผมไม่ค่อยได้ใช้) ส่วนระบบต่างๆที่มีให้ใช้อยู่คือการสร้างเว็บไซต์ทั่วไป ระบบสมาชิก การสร้างร้านค้า ระบบหลังร้าน ระบบCRMแบบง่ายๆ หรือแพ็กเกจที่อาจเสียเงินเพิ่มเช่น อีเมลล์มาเก็ตติ้ง แชทบอท หรืออื่นๆที่แพลทฟอร์มพยายามสร้างและเพิ่มเติมเข้าไป ถ้าถามว่าราคาโอเคไหม ถ้าใช้งานสำหรับยิงแอ๊ด ราคาไม่แพงครับ แต่ถ้าเอามาสร้างเว็บไซต์ทั่วไป ที่อื่นๆก็มีครับ  การสร้างแต่ละหน้าของฟันเนลใช้งานคล้ายเพจบิวเดอร์ในแพลทฟอร์มอื่นๆ คือสร้างง่ายๆลากๆปรับๆพิมพ์ แต่ก็มีข้อจำกัดที่แต่ละวิธเจ็ทสร้างมา มีสิ่งที่ทำได้และทำไม่ได้ ดังบทความบนๆที่ผ่านมา

      

         แต่เนื่องจากผม ทำงานด้วยอาศัยการสร้างคอนเทนท์ด้วยการเขียนหรือพิมพ์ ซึ่งแต่ละคอนเท้นท์ ใช้เวลาเป็นเดือน ซึ่งบางช่วงเวลาไม่มีเวลาทำอยู่หลายเดือน ค่าใช้จ่ายด้านเซิฟเวอร์ในการผลิตคอนเทนท์ในระยะยาวคิดว่าไม่คุ้มค่าเท่าไหร่นั่นคือประเด็นหลัก ประเด็นรองที่ผมสงสัยมาตั้งแต่ต้นคือ การย้ายคอนเทนท์ไปอีกแพลทฟอร์ม เช่น Funb มา เวิร์ดเพลส หรือไปwordpress.com เป็นต้นไม่ใช่เรื่องง่ายนัก และเสียเวลาค่อนข้างมาก ยังไงก็ตามถ้าเราอายุเยอะชึ้นเราก็อยากเก็บคอนเทนต์ต่างๆเอาไว้เผื่อเป็นประโยชน์ต่อคนทั่วไปและค่าใช้จ่ายต่อหน่วยควรจะถูก เป็นที่นิยมและย้ายข้อมูลง่ายในระยะยาว  สรุปถ้าต้องทำคอนเทนท์ที่ไม่แสวงหากำไรอย่างเดียวคือเน้นให้คนทั่วไปได้รับประโยชน์ด้วย  ในระยะยาวแล้ว เวิร์ดเพลสคุ้มค่ากว่ามากในเรื่องราคา ซึ่งปัจจุบัน wpปรับระบบการเขียนเป็น block editor เพียงแค่1ปีผ่านไปตอนนี้ใช้งานดีมากๆ ซึ่งในอนาคต จะมีฟังก์ชั่นทุกอย่างในการสร้างเพจหลักๆเหมือน page builder ในทุกๆแพลทฟอร์มที่สร้างเว็บไซต์ได้ ซึ่งถ้าดูเพจเก่าในฟันแนลแบงจ์ที่ผมสร้างคอนเทนท์ที่ทำอะไรได้บ้าง(เป็นpdf)  ในเวิร์ดเพลสก็ทำได้คล้ายๆกัน และ block editor ก็ใช้งานได้ง่ายกว่ามากในมุมส่วนใหญ่ การก็อปปี้บล็อกข้ามบทความก็ทำได้ง่ายและดีกว่า ปรับทุกอย่างได้เกือบหมด หาปลั๊กอินได้ง่าย textwidget ในfunnel bang ยังดีไม่เท่าblock editor ในส่วนของ classic block editor ผมอาศัยตัวนี้ในการย้ายบทความจาก funb มา wp

    

      มาดูข้อเสียของ Funnel Bang ดีไหม ฟันเนลแบงจ์ดีไหม สักนิดนึง ที่ผมอยากจะแนะนำ ในฐานะเคยใช้งานมา1ปี ข้อเสียหลักๆยังเหมือนเดิมตั้งแต่เริ่มเสียเงินเข้าไปใช้งานแพลทฟอร์ม คือจะค้นหาว่าสิ่งใดทำได้และทำอย่างไร ก็ไม่มีที่ให้ค้นหาอย่างเป็นระบบ  การอัพเดทอะไรบนเว็บไซต์ www.funnelbang.com  โดยเฉพาะคู่มือการใช้งานที่ให้คนทั่วไปได้ดูได้ค้นหาก็ไม่มี หรือมีก็แค่หน้าตาคล้ายๆกัน เข้าใจว่าผู้สร้าง Funnel Bang ต้องการให้การศึกษาเป็นระบบที่ดีมีวีดีโอสอน แต่มันเป็นระบบปิด ต้องเสียเงินเข้าไปเรียนวิธีการใช้งาน ซึ่งผมในฐานะผู้ใช้งานUserไม่ชอบเอามากๆ และคิดว่าเป็นสิ่งทำให้ฟันแนลแบงจ์ไม่เป็นที่นิยม เนื่องจากเป็นระบบปิดเกือบทั้งหมด  มีหลายคนไลน์มาถามผมว่าเป็นไงเขาสนใจแต่หาข้อมูลไม่ได้ ผมได้เพียงแต่แนะนำว่าลองเข้าไปเรียนตามคอสที่เขาจะสอนและสอนฟรี แต่พอได้ยินว่าต้องเสียเงินเรียนด้วย ผมก็ได้แนะนำเว็บไซต์วีดีโอบนyoutube ที่มีการเรียนรู้ในการสร้างฟันแนลหรือเว็บไซต์ที่คล้ายๆกันเหมือนในบทความที่ผ่านๆมาให้ลองไปศึกษาดูเอาเองก่อนเข้าไปลองใช้งานหรือคอสเรียน   การเป็นระบบปิด เป็นข้อเสียที่สำคัญยิ่ง ที่ทำให้ไม่เป็นที่นิยม เพราะไม่มีใครบอกได้ว่ามันมีข้อดีหรือข้อเสียอย่างไร มีตัวอย่างมีรูปแบบการใช้งานอะไรบ้างไหม ก่อนที่เราจะตัดสินใจอะไรลงไป  ซึ่ง Funnel Bang เป็นเพียงแค่ทูลในการสร้างเว็บไซต์ ที่อิงฟันเนล และระบบเสริมอำนวยความสะดวกเท่านั้น การที่จะทำเว็บหรือฟันแนล หรือระบบสมาชิก อีเมลมาเก็ตติ้ง หรือเว็บไซต์ หรือแอพใดๆก็ตาม การจะไปต่อได้ในระยะยาวอยู่ที่ไอเดียเท่านั้น ไม่จำเป็นต้องผูกติดกับทูล เพราะ ทูลมีการพัฒนาไปและหาใช้ได้ทุกวัน แต่ทูลที่ดี ต้องมีคนใช้จำนวนมาก เป็นที่นิยม ถ้าโอเพ่นได้ก็ดี และถ้ามีคนถกเถียงหรือแนะนำวิธีการใช้งานเป็นจำนวนมากจึงจะไปต่อได้ยาวๆ แต่ถ้าจะหากินแต่เป็นระบบปิดมันก็ดีสำหรับคนขายแต่ไม่ได้ดีสำหรับคนซื้อหรือผู้บริโภคในระยะยาว

     

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

    

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

      

       สิ่งแรกที่ผมหาคือส่วนระบบblog ที่มีในอยู่ทูลโดเมนเว็บไซต์ของฟันเนลแบงจ์ (ส่วนblog widget ที่ใช้ในฟันเนล ลากมาแล้วก็ไม่มีอะไรเกิดขึ้น คือใช้ไม่ได้) ตอนแรกดีใจมากว่าน่าจะดี ไม่ต้องสร้างทีละหน้าบนฟันแนล แต่พอลองเปิดระบบดู พบว่า ระบบการสร้างบทความ blogบนfunnelbang เป็นระบบที่ค่อนข้างไม่ยืดหยุ่นคือปรับระบบอะไรไม่ได้ ค้นหาอะไรไม่ได้เลย รูปแบบการจัดวางก็ปรับอะไรไม่ได้ง่าย คือใส่อะไรไม่ได้ตามใจเหมือนกับหน้าฟันเนล ระบบblog ในทูลเว็บไซต์ จึงไม่เหมาะกับการทำคอนเท้นท์ดีๆให้มีรูปแบบได้ตามใจ ระบบการจัดการหลังบ้านของบทความก็แทบจะไม่มีอะไรเลย เมื่อเทียบกับwp ระบบ blogในเว็บไซต์โดเมนของfunb เป็นระดับต่ำมากเป็นแค่การสื่อสารข้อมูลกับลูกค้าได้ในระดับนึงเท่านั้น และไม่สามารถใส่ api comment ลงในบทความได้เลย 

     

       ส่วนเรื่องระบบค้าขาย หรือระบบstore การแสดงผล categoryสินค้า ก็ดีพอสมควรครับ ถือว่าเป็นแบบมืออาชีพ  แต่การจัดการหลังบ้านสำหรับลูกค้าแล้วถ้าเทียบกับระบบการจัดการหลังบ้านของพวกเทพช็อบ ในแง่ลูกค้าหรือคนมาซื้อแล้วยังถือว่าใช้ยากครับ การแจ้งการส่งเมลล์เป็นขั้นๆ ระบบที่ลูกค้าจะการตามสินค้า การส่งtracking ถ้าเทียบกันแล้วมีแค่การส่งเมลล์แค่ขั้นแรกๆและหลังจากนั้นระบบไม่ค่อยเป็นมิตรกับคนซื้อเท่าไหร่ คือ ถ้าจ่ายเงินและแจ้งมาก็ส่งเมลล์ไปแจ้งให้มีแค่นี้ครับ ที่เหลือมีระบบแจ้งพอสมควรแล้วแต่คนขายจะจัดการ แต่ในแง่คนขายก็ถือว่าเป็นระบบที่ใช้ง่ายคือ ขั้นตอนเดียวเสร็จลูกค้าจ่ายตังค์มา ก็จบแล้ว พอคอนเฟิร์มออเดอร์ ก็จะส่งเมลล์อีกครั้งขึ้นว่ากำลังจัดส่งไปหรือให้ไปดาวโหลดได้ที่ลิงค์นี้ มันมีแค่นี้ 

    

invoice_example_form_funnel_bang_store_system ตัวอย่างอินวอยซ์ส่งทางอีเมลล์ เมื่อสั่งซื้อสินค้า ทาง แพลตฟอร์ม ฟันแนลแบงจ์

     

         การย้ายเซิฟเวอร์จากแพล็ทฟอร์ม Funnel bang ไปที่อื่น  Funb เป็นเซิฟเวอร์ที่ไม่มีรองรับระบบแบ็คอัพในการย้ายข้อมูลใดๆ แม้แต่ถ้ามีผู้ให้บริการแพลทฟอร์มฟันเนลต่างยี่ห้อ เช่น เราจะย้ายจาก funb ไป clickfunnels ก็ไม่มีการแบ็คอัพแล้วย้ายไปง่ายๆ ต้องค่อยๆคัดลอกข้อมูลตัวอักษรทีละบล็อกทีละวิธเจ็ทคัดแยกแล้วย้ายไปเอาเอง  เข้าใจว่าเป็นเพราะระบบฐานข้อมูลที่เป็นเนื้องานจริงๆเป็นระบบรวมบล็อกของทุกคนที่เข้ามาใช้แพล็ทฟอร์ม ฐานข้อมูลแต่ละเรคคอร์ดจะประกอบด้วยบล็อกเรียงยาวไปเรื่อยๆทุกครั้งที่มีคนสร้างใหม่โดยไม่ได้คัดแยกผู้ใช้งาน แต่อาจจะมีการอิงชื่ออีเมลล์ของuserในอีกตารางที่เป็นระบบฐานข้อมูลหน้าเพจ ซึ่งจะเรียกข้อมูลของฐานข้อมูลบล็อกออกมา สร้างเป็นหน้าเว็บไซต์ขึ้นมา  มันจึงเป็นระบบที่มีความเสถียร กันการโจมตีจากภายนอกได้ดีมาก(ระบบฐานข้อมูลรวมแบบบล็อกเข้าใจว่าการสร้างแต่ละหน้าในfunbก็คล้ายกับเซิฟเวอร์เว็บไซต์ของdevcron) แต่ถ้าใช้แล้วก็ย้ายออกยาก เพราะมันไม่เคยเข้ากับระบบแพล็ทฟอร์มอื่นๆโดยธรรมชาติ และไม่มีปุ่มที่คัดแยกเอาแต่เนื้อความออกมาเพื่อให้เข้ากับแพล็ทฟอร์มใด หรืออาจจะมีแต่ถูกปิดระบบอำนวยความสะดวกในการย้ายข้อมูลเอาไว้ก็ไม่รู้ได้ การย้ายไปที่อื่นจึงต้องมีผู้ชำนาญในการคัดกรองข้อมูลแต่ละหน้าแต่ละบล็อกแต่ละวิธเจ็ทให้เข้ากับแพล็ทฟอร์มอื่น จึงย้ายได้และหน้าตาเหมือนเดิมทุกประการ ซึ่งไม่ง่ายและเสียค่าใช้จ่าย แต่ถ้าคุณเป็นผู้ประกอบการที่มีเงินทุน สามารถจ้างผู้ชำนาญย้ายข้อมูลได้ funb ก็ถือว่าเป็นเซิฟเวอร์แพล็ทฟอร์มที่ดี ที่ถูกโจมตีได้ยากจากภายนอก หรือถ้าถูกโจมตีเขาสามารถเขียนโปรแกรมแก้ไขได้ทีเดียวได้ทุกuser ระบบแบ็คอัพน่าจะดีมากพอสมควร เนื่องจากเป็นระบบฐานขัอมูลรวม 

    

funnel bang block_structure_desktop โครงสร้างบล็อกdivแสดงผลบนเครื่องdesktop แพลตฟอร์ม ฟันแนลแบงจ์

    

    

      ยกตัวอย่างของผมเอง  ผมย้ายข้อมูลจากฟันแนลแบงจ์ออกมาที่เวิร์ดเพลส ก็ไม่ใช่เรื่องง่าย ต้องใช้ regex ใน VScode ในการเลือกและการปรับเปลี่ยนข้อมูลให้เหมาะสมกับเวิร์ดเพลส ต้องโหลด html ดิบๆมาแล้วค่อยๆ เอาส่วนที่ไม่ใช้ออกไป เหลือแต่ข้องมูล div และมี tag p อยู่ข้างใน โชคดีที่ wordpress ยังมี classic editor เลยตัดแปะ ซึ่งใช้เวลาไม่นานนักถ้าคัดเอาข้อมูลปรับข้อมูลให้เหมาะสมกับเวิร์ดเพลส และปรับcssของเวิร์ดเพลสให้ไปในทางเดียวกับเว็บที่สร้างไว้แล้วในfunb  ในทางกลับกันถ้าอยู่ในเวิร์ดเพลสอยู่แล้วจะย้ายไป funb ผมไม่แนะนำเอามากๆ เพราะในเรื่องการเขียนคอนเท้นท์ เวิร์ดเพลสปัจจุบัน มีทูลเขียนคือบล็อกอิดิทเตอร์ที่ดีสร้างได้ตามรูปแบบที่ต้องการ และมันจะดียิ่งๆขึ้นอย่างมืออาชีพสุดๆในทุกๆปี มีระบบcategoryบทความที่ดีมากๆ สามารถใส่โค๊ดในบล็อกอิดิทเตอร์ให้แสดงหัวข้อบทความได้อย่างอัตโนมัติในหน้าไหนก็ได้ เพียงพิมพ์อะไรแค่ไม่กี่บรรทัดเท่านั้น และกูเกิ้ลก็นิยมคอนเท้นที่สร้างจากเวิร์ดเพลสมากกว่าแพลทฟอร์มอื่นๆ ในการจัดอันดับคอนเท้นท์ และแน่นอนถ้าจะย้ายออกมาก็ลำบากมากๆแน่ถ้าคอนเท้นท์เยอะๆ คงต้องเขียนโปรแกรมคัดกรองข้อมูลในการย้ายเท่านั้น และต้องปรับการตกแต่งอีกหลายอย่างพอสมควร

       

  คอนเท้นท์เดิมถูกสร้างบน Funnelbang.com และถูกย้ายมาเวิร์ดเพลส

Please download pdf to read the content , old content created at Funnel Bang

https://pui108diych.com/wp-content/uploads/tmp/p9000-try-to-use-funnel-bang.pdf

 1,646 total views,  9 views today