ธีมของค่ายนี้ เมื่อติดตั้งใช้งาน จะมีปุ่มให้สร้างหน้าแรก แบบ auto ให้คลิ๊กสร้าง จะได้หน้าแรกของเว็บที่จะเลือกเป็น static page แทน last post อัตโนมัติ พร้อม layout หน้า ตามแบบที่ ยlugin ตัวนี้ออกแบบมา เวลาแก้ไขหน้าแรกก็ไปที่ ธีม และ เลือก customize ตามปกติ
การทำงานหลังจากเราคลิ๊ก มันจะไปโหลด plugin ตัวหนึ่งชื่อ icyclub (https://wordpress.org/plugins/icyclub/)
โดยปลั๊กอินตัวนี้ออกแบบมาเพื่อใช้กับ Theme ของค่าย Themeansar เท่านั้น ดังนั้นการจะเพิ่มช่อง section ต่างๆให้มากขึ้นอาจแก้ได้ที่ไฟล์นี้ หรือ ซื้อ เวอร์ชั่นโปร
ปลั๊กกอินตัวนี้คล้ายๆ ไม่ใช่ page builder แต่เป็นเหมือน การเขียนโค๊ดหน้าแรก ด้วยตัวเอง แต่ใช้ผ่าน plugin และ ใช้ได้ตามแบบที่ plugin ตัวนี้ออกแบบ layout มาให้เท่านั้น
Icyclub plugin for all Themeansar Theme
The Icyclub plugin features include:
- Beautiful pre-build homepage layouts
- Drag and drop page customization
- Predefined usefull sections
- Live content editing
- and many other features
สรุป layout ที่ให้มา กดลิ้งไปต่อไม่ได้ด้วย ต้องซื้อโปร หรือ เปลียนธีม หรือ เขียน html หน้าแรกขึ้นมาเอง น่าจะแก้ได้ง่ายกว่า เพราะหน้าแรก หน้าเดียว
bkintercontech.com
– หน้าแรกเป็น html แสดงผลเร็ว รองรับทราฟฟิกดีกว่าหลายเท่า (ประเมินผลฝั่งuser) เอาไฟล์วาง root
หน้าแรกทำจากการเซฟ หน้าแรกของธีมนี้ หลังจากใช้ธีม จะ import หน้าแรกมาให้แบบสำเร็จ ซึ่งเก็บค่าต่างไว้ที่ปลั๊กอิน ที่ถูกแอบติดตั้งเข้ามาตอน import ข้อมูลตัวอย่างหน้าแรก โดยธีมฟรีจะแก้ไขได้บางส่วนจำกัด การทำงานของ ปลั๊กอินตัวนี้จะรวมอยู่ใน customize theme ถ้าเอามันออกไป จะแก้อะไรหน้าแรกไม่ได้
เมื่อแก้หน้าแรกได้ตามต้องการแล้ว (ปรับสุด) ก็ save หน้าแรก จะได้มา 1 ไฟล์ และ folder ที่เก็บส่วนประกอบต่างๆ และ หน้าแรกนี้จะลิ้งข้อมูลรูปจากตัวของปลั๊กอินด้วย ดังนั้นถ้าลบปลั๊กอิน รูปจะไม่แสดง จึงต้องเปลี่ยน path ของรูปใหม่ หากต้องการให้มีส่วนของบทความล่าสุด ก็อาจเปลี่ยนรูปและลิ้ง โดยวิธีแมลนวล ที่หน้าแรกของธีมนี้ทำแบบ hybrid ได้เพราะ ตัวธีมหน้าแรกไม่ได้ดึงค่าอะไรมาเลย ยกเว้น อัพเดทบทความล่าสุด
– เมื่อลบ ปลั๊กอินแล้วก็ต้องแก้ไขส่วนหัวของ html ให้เหมือนกับ หน้าอื่น (ตรงนี้ใช้เวลาลองวางแต่ละตำแหน่งจนได้ตำแหน่งที่ถูกต้องมา)
– ทำการเปลี่ยน head.php ด้วย เพราะ ส่วนที่แสดงเบอร์และวันทำงาน ไอคอนโซเชียล จะหายไปด้วย เนื่องจากข้อมูลส่วนนี้มาจาก ปลั๊กอินนั่นเอง
– การแก้เมนูทำแบบปกติ เมื่อได้ที่ถูกต้องแล้วก็มาแก้ใน หน้าแรกให้เหมือนกัน โดย copy code ใส่ลิ้งธรรมดาในไฟล์ html ของหน้าแรก
– Modify หน้าแสดงหมวดหมู่ archieve.php ให้แสดงรายการโพสท์เท่านั้น (เดิมดึงมาทั้งเนื้อหา) เพื่อง่ายต่อการใช้งาน เรียงเป็น พสท์
– ด้านขวายังคงให้แสดง sidebar เพื่อผู้ใช้งานจะเลือกดูหมวดหมู่อื่นได้ง่าย
archieve.php
ถ้าใช้ code นี้ แสดงหน้ากว้างเต็ม ไม่มี side bar
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php the_content(); ?>
/* Custom Archives Functions Go Below this line */
/* Custom Archives Functions Go Above this line */
</div><!-- .entry-content -->
<?php endwhile; // end of the loop. ?>
ใช้จริง (แสดงโพสท์ใน category นั้นๆ)
<!-- List all post on their category https://codex.wordpress.org/The_Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Test if the current post is in category 3. -->
<!-- If it is, the div box is given the CSS class "post-cat-three". -->
<!-- Otherwise, the div box is given the CSS class "post". -->
<?php if ( in_category( '3' ) ) : ?>
<div class="post-cat-three">
<?php else : ?>
<div class="post">
<?php endif; ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h5><i class="fas fa-chevron-circle-right"></i> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
</div> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
<?php endwhile; else : ?>
<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<!-- REALLY stop The Loop. -->
<?php endif; ?>
<!-- List all post on their category https://codex.wordpress.org/The_Loop -->
<?php /*
if( have_posts() ) :
while( have_posts() ): the_post();
get_template_part('content','');
endwhile; endif;
*/?>
ดึง feature image ให้ใส่หลัง </h5>
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
<?php the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
?>
หรือ
<?php
the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']);
?>
หรือ (มีลิ้งด้วย)
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
หรือ
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions
หรือ
the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) );
หรือ
<!-- feature image with link and spec image dimention -->
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) ); ?></a>
หรือ
https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/
ดึง feature image 150x150
<?php echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'alignleft' ) ); ?>
full featured image
<?php the_post_thumbnail( 'large','style=max-width:100%;height:auto;');?>
get thumbnail_url
https://stackoverflow.com/questions/11261883/how-to-get-wordpress-post-featured-image-url
<?php echo get_the_post_thumbnail_url($post_id, 'thumbnail'); ?>
or
<?php
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo $feat_image;
?>
or
<?php echo get_the_post_thumbnail_url( null, 'full' ); ?>
อื่น
https://webtalkhub.com/how-to-get-featured-image-url-in-wordpress/
ถ้าไม่มีรูปให้แสดงรูปอื่น
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
หรือ
if (has_post_thumbnail()) {
?><a href="<?php the_post_thumbnail_url(); ?>">
<?php the_post_thumbnail();?>
</a><?php
} else {
echo '<figure><a href="add_link_here"><img src="'.get_bloginfo("stylesheet_directory").'/images/stone.jpg" /></figure></a>';
}
ถ้าไม่มี feature image ให้แสดง content แทน
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
the_content();
}
?>
ดึงรูปแรกของโพสท์ ถ้าไม่มี ให้ดึง feature image
functions.php
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
$first_img = $matches[1][0];
if(empty($first_img)) {
$first_img = "/path/to/default.png";
}
return $first_img;
}
archive.php
...
<?php
if ( get_the_post_thumbnail($post_id) != '' ) {
echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
echo '<img src="';
echo catch_that_image();
echo '" alt="" />';
echo '</a>';
}
?>
...
(ยังคงใส่หลัง </h5> คือ อยู่ใน loop)
เหตุผลที่ต้องมี feature image เพราะ กำหนดภาพที่ต้องการได้อิสระจากภาพในโพสท์ ทั้งภาพที่แสดงและขนาด เหตุผลที่ค้นใน google ไม่ค่อยเจอ การดึง thumbnail ของ post เพราะ โพสท์อาจมีหลายรูป ซึ่งทำให้โต๊ดดึงมาทั้งหมดของโพสท์ก็ได้ จึงต้อง กำหนดให้ดึงรูปแรก > get first image
How to change the default category of WordPress posts
เข้าไปเปลี่ยนใน category หรือ ลบออกได้เลย แต่มีผลกับ SEO
แสดงหัวข้อทุกโพสท์ในหมวดหมู่นั้น และ ดึงรูปแรก
archive.php
<!-- List all post on their category https://codex.wordpress.org/The_Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Test if the current post is in category 3. -->
<!-- If it is, the div box is given the CSS class "post-cat-three". -->
<!-- Otherwise, the div box is given the CSS class "post". -->
<?php if ( in_category( '3' ) ) : ?>
<div class="post-cat-three">
<?php else : ?>
<div class="post">
<?php endif; ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h5><i class="fas fa-chevron-circle-right"></i> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
<!-- ดึงรูปแรก ใช้คู่กับ code /*first images*/ ใน functions.php -->
<?php
if ( get_the_post_thumbnail($post_id) != '' ) {
echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
the_post_thumbnail();
echo '</a>';
} else {
echo '<a href="'; the_permalink(); echo '" class="thumbnail-wrapper">';
echo '<img src="';
echo catch_that_image();
echo '" alt="" />';
echo '</a>';
}
?>
<!--end ดึงรูปแรก ใช้คู่กับ code /*first images*/ ใน functions.php -->
</div> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
<?php endwhile; else : ?>
<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<!-- REALLY stop The Loop. -->
<?php endif; ?>
<!-- List all post on their category https://codex.wordpress.org/The_Loop -->
<?php /*
if( have_posts() ) :
while( have_posts() ): the_post();
get_template_part('content','');
endwhile; endif;
*/?>
functions.php
/*first images*/
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+?src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches);
$first_img = $matches[1][0];
if(empty($first_img)) {
$first_img = "/path/to/default.png";
}
return $first_img;
}
ไม่ใช้ contact form เพราะไม่จำเป็น ทำให้เว็บเสี่ยงเพราะต้องใช้ plugin เพิ่ม
เราจะให้คลิ๊กแล้ววิ่งเข้า app mail ปกติ จะทำให้เราเห็นว่า ส่งมาจากเมลไหน
จะใช้ contact form เมื่อจำเป็นต้องขอข้อมูลบังคับอื่นๆ