หัวใจออนทัวร์
แนะนำ ถามให้หายข้องใจ => ประสปการณ์คนทำเวป => Topic started by: Phoenix on September 19, 2011, 07:43:08 PM
-
การใส่รูปประจำบอร์ด โดยการใส่รูปสวยๆ หรือรูปที่สื่อถือเนื้อหาในบอร์ด
เป็นอีกหนึ่ง วิธีการเพิ่มเติมให้ บอร์ดของเราน่าสนใจขึ้นกว่ารูปแบบบมาตรฐานของ Themes ของ smf ที่ใช้อยู่
อย่างเช่นบอร์ดหัวใจออนทัว เราก็อยากสร้างเอกลักษณ์ ด้วยการใส่รูปที่หัวบอร์ดเพื่อให้สมาชิกสามารถดูได้ง่ายว่าตัวเองอยู่บอร์ดไหน แม้จะใช้ Theames เดียวกัน
-
จริงๆ หลักการก็เช่นเดียวกันการใส่ banner ครับ เพียงแต่ตัวนี้เราเพิ่มที่ด้านบน
ผมอ้างอิงตาม Themes default นะครับ เพราะในบอร์ดนี้ใช้ Themes นี้ในการปรับแต่ง
ไฟล์ชื่อ index.template.php
ตำแหน่งของไฟล์ Themes\default
ให้ค้นหา code สวนนี้
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section"> '.$board_pic.'
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($settings['header_logo_url']) ? $context['forum_name'] : '<img src="' . $settings['header_logo_url'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';
นี่คือส่วนที่ เกี่ยวกับการแสดง logo ของ SMF บอร์ดครับ
-
ต่อไปก็ ทำความรู้จักกับ Code ในส่วนที่เราต้องการจะแทรกเช้าไป
code ที่ใช้ในการแทรกภาพ จริงแล้วมีแต่นิดเดียวครับ เทคนิคอยู่แทรกในตาราง
<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>
แต่จะเพิ่มให้เก๋ขึ้นอีกหน่อย คือ เปลี่ยนรูปตาม id board โดยการใส่ switch case เข้าไปด้วย
switch ($context['current_board']) {
case 1 : //คเนจร
$board_pic='<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 2 : //ชมรมจักรยาน จ.ระนอง
$board_pic='<TABLE background="Themes/default/images/theme/bike.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 5 : //คนรักชูก้าร์
$board_pic='<TABLE background="Themes/default/images/theme/winny2.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 6 : //technic_energy
$board_pic='<TABLE background="Themes/default/images/theme/technic_energy.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
default :
$board_pic='<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
}
-
Code ที่สมบูรณ์หลังจากการ ควบคุมเรื่องตำแหน่งให้สวยงาม
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
///////////edite by phoenix//////////////
$board_pic_end='</h1>
</TD>
</TR>
</TABLE>';
switch ($context['current_board']) {
case 1 : //¤à¹¨Ã
$board_pic='<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 2 : //ªÁÃÁ¨Ñ¡ÃÂÒ¹ ¨.Ãйͧ
$board_pic='<TABLE background="Themes/default/images/theme/bike.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 5 : //¤¹ÃÑ¡ªÙ¡éÒÃì
$board_pic='<TABLE background="Themes/default/images/theme/winny2.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
case 6 : //technic_energy
$board_pic='<TABLE background="Themes/default/images/theme/technic_energy.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
break;
default :
$board_pic='<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>';
}
///////////edite by phoenix//////////////
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section"> '.$board_pic.'
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($settings['header_logo_url']) ? $context['forum_name'] : '<img src="' . $settings['header_logo_url'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';
-
ใครสนใจเอาไปลองปรับใช้กันดูนะครับ ผมพยายามแยกส่วนการทำงานให้ดูเท่าที่คิดว่าจะมีประโยชน์ เพราะในส่วนการทำงานลึกๆ ของแต่ละFunction ผมก็ไม่ได้เข้าไปแกะและปรับเปลี่ยน เพื่อความสะดวกในการ update version ต่อไปครับ
-
ขอบคุณมากครับ
-
อ๋อ ....ขอบใจม๊ากมาก