แนะนำ ถามให้หายข้องใจ > ประสปการณ์คนทำเวป

SMF ใส่ภาพ logo ประจำบอร์ด

(1/2) > >>

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