แนะนำ ถามให้หายข้องใจ > ประสปการณ์คนทำเวป
SMF ใส่ภาพ logo ประจำบอร์ด
Phoenix:
การใส่รูปประจำบอร์ด โดยการใส่รูปสวยๆ หรือรูปที่สื่อถือเนื้อหาในบอร์ด
เป็นอีกหนึ่ง วิธีการเพิ่มเติมให้ บอร์ดของเราน่าสนใจขึ้นกว่ารูปแบบบมาตรฐานของ Themes ของ smf ที่ใช้อยู่
อย่างเช่นบอร์ดหัวใจออนทัว เราก็อยากสร้างเอกลักษณ์ ด้วยการใส่รูปที่หัวบอร์ดเพื่อให้สมาชิกสามารถดูได้ง่ายว่าตัวเองอยู่บอร์ดไหน แม้จะใช้ Theames เดียวกัน
Phoenix:
จริงๆ หลักการก็เช่นเดียวกันการใส่ banner ครับ เพียงแต่ตัวนี้เราเพิ่มที่ด้านบน
ผมอ้างอิงตาม Themes default นะครับ เพราะในบอร์ดนี้ใช้ Themes นี้ในการปรับแต่ง
ไฟล์ชื่อ index.template.php
ตำแหน่งของไฟล์ Themes\default
ให้ค้นหา code สวนนี้
--- Quote ---
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>';
--- End quote ---
นี่คือส่วนที่ เกี่ยวกับการแสดง logo ของ SMF บอร์ดครับ
Phoenix:
ต่อไปก็ ทำความรู้จักกับ Code ในส่วนที่เราต้องการจะแทรกเช้าไป
code ที่ใช้ในการแทรกภาพ จริงแล้วมีแต่นิดเดียวครับ เทคนิคอยู่แทรกในตาราง
--- Quote ---<TABLE background="Themes/default/images/theme/board.png" WIDTH="100%" HEIGHT="150">
<TR>
<TD>
--- End quote ---
แต่จะเพิ่มให้เก๋ขึ้นอีกหน่อย คือ เปลี่ยนรูปตาม id board โดยการใส่ switch case เข้าไปด้วย
--- Quote ---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>';
}
--- End quote ---
Phoenix:
Code ที่สมบูรณ์หลังจากการ ควบคุมเรื่องตำแหน่งให้สวยงาม
--- Quote ---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>';
--- End quote ---
Phoenix:
ใครสนใจเอาไปลองปรับใช้กันดูนะครับ ผมพยายามแยกส่วนการทำงานให้ดูเท่าที่คิดว่าจะมีประโยชน์ เพราะในส่วนการทำงานลึกๆ ของแต่ละFunction ผมก็ไม่ได้เข้าไปแกะและปรับเปลี่ยน เพื่อความสะดวกในการ update version ต่อไปครับ
Navigation
[0] Message Index
[#] Next page
Go to full version