គន្លឹះ​បង្កើត WordPress Shortcode​ ដោយ​ខ្លួន​ឯង

Shortcode​ គឺ​ជា​មុខងារ​ដ៏​ពិសេស​មួយ​របស់ WordPress សម្រាប់ Web Developer បង្កើតតែម្តង ឬហៅទៅប្រើប្រាស់បានគ្រប់ទីកន្លែង ដោយគ្រាន់តែចម្លងកូដខ្លីមួយជួរ ។ សូម​មើល​រូប​ខាង​ក្រោម ជាឧទាហរណ៍៖

ប្រសិន​បើ​លោកអ្នក​​​សរសេរកូដ HTML នោះ​លោកអ្នក​នឹង​ចំណាយ​កម្លាំង​ច្រើន តែ​ប្រសិន​បើ​លោកអ្នក​ប្រើប្រាស់ Shortcode​ វិញ នោះ​វា​នឹង​មាន​ភាព​លឿន​រហ័ស​ជាង គួរ​ជា​ឲ្យ​កត់​សម្គាល់។ ដូច​គ្នា​នេះ​ដែរ សម្រាប់​ការងារ​ដដែល​ៗ នៅ​ក្នុង post editor ឫ​ក៏​លោកអ្នក​ចង់​បាន HTML format ដ៏​ជាក់លាក់ណាមួយ ដែល​ត្រូវ​ការ​ពេល​វេលាច្រើន នោះការ​បង្កើត Shortcode​ ដោយខ្លួនឯង​ នឹង​ជា​គន្លឹះ​ជំនួយ​ថ្មី​សម្រាប់​លោកអ្នក៖

ការ​ណែនាំ​អំពី​​ Shortcode

Shortcode​ គឺ​ជា​ប្រភេទ​កូដ​សម្រាប់​ធ្វើ​ការ​ជំនួស (replace) នូវ​ពាក្យ ឫ​ឃ្លា​ដទៃ​ផ្សេង​ទៀត​ដែល​លោកអ្នក​ផ្ដល់​និយម​ន័យឲ្យ។ ឧទាហរណ៍៖ សំបុកអាយធី ​មាន​អត្ថបទដូច​ខាង​ក្រោម៖

“According to our company’s owner – Daniel Pataki – the main goal of the website is to generate lots of money. Daniel Pataki thinks that sharing is also important.”

ជំនួស​ឲ្យ​ការ​សរសេរ  នេះ យើង​អាច​ប្រើប្រាស់ Shortcode​ មួយ៖

“According to our company’s owner – [owner] – the main goal of the website is to generate lots of money. [owner] thinks that sharing is also important.”

ដូច​នេះ ប្រសិន​បើ​យើង​ចង់​ធ្វើការ​កែ​ប្រែ ឈ្មោះ “Daniel Pataki” នោះ​យើង​នឹង​កែ​តែ​ម្ដង​ប៉ុណ្ណោះ។

សម្រាប់​រូប​មន្ត​វិញ គឺ add_shortcode() function បន្ទាប់​មក​គឺ function។ ឧទាហរណ៍៖

add_shortcode( 'owner', ‘owner_output' );
    function owner_output() {
    return ‘Daniel Pataki';
}

ចំណាំ៖ លោកអ្នក​នឹង​ត្រូវ​បន្ថែម​កូដ​នេះ​ទៅ​ក្នុង functions.php file របស់​ theme ឫ files របស់​ plugin 

ចំពោះ add_shortcode function ត្រូវ​ការ 2 parameters រួម​មាន៖

  • parameter ទីមួយ គឺ shortcode ដែល WordPress ព្យាយាម​យក​មក​ផ្ទៀង​ផ្ទាត់ ដែល​ជា​អ្វី​ដែល​លោកអ្នក​សរសេរ​ក្នុងឃ្នៀប (square brackets)
  • parameter ទីពីរ​ គឺ​ជា​ឈ្មោះ​របស់ function ដែល​លោកអ្នក​ចង់​បាន សម្រាប់​​ធ្វើ​ការ handle នូវ output។

នៅ​ក្នុង output handling function របស់​យើង យើង​នឹង​ត្រូវ​ការ “return”  សម្រាប់​ធ្វើ​ការ replace នូវ Shortcode​ របស់​យើង។

Shortcode Attributes

ប្រសិន​បើ​លោកអ្នក​ចង់​បាន​ឈ្មោះ “Daniel Pataki” នោះ ជា​អក្សរដិត (bold) នោះ​លោកអ្នក​គ្រាន់​តែ​សរសេរ attribute ដែល​មាន​ឈ្មោះ​ថា “bold” ហើយធ្វើ​ការ set វា​ជា true ជា​ការ​ស្រេច។ ឧទាហរណ៍៖

add_shortcode( 'owner', ‘owner_output' );
function owner_output( $atts ) {
    $atts = shortcode_atts( array(
        ‘bold' => false
), $atts );
if$atts[‘bold'] == true  ) {
        return ‘<strong>Daniel Pataki</strong>';
}
else {
return ‘Daniel Pataki';
}
}

នៅ​ពេល​ដែល​លោកអ្នក​សរសេរ Shortcode​ វិញ លោកអ្នក​នឹង​ត្រូវ​សរសេរជា៖
[owner bold='true']

Shortcode Content

Shortcode content តែង​តែ​ត្រូវ​បាន​ប្រើប្រាស់​នៅ​ពេលដែល​គេ​ត្រូវ​ការ HTML formatting។ ឧបមាថា​ គេហទំព័រ​របស់​លោកអ្នក​ប្រើ​ប្រាស់ title ដូច​នេះ៖

<h1><span class="fa fa-check"></span>My Title</h1>

នេះ​គឺ​ជា title ពិសេស​មួយ​ ដែល​ជាប្រភេទ level one heading និង​មាន icon ផង​ដែរ។ យើង​ក៏​អាច​បង្កើតវា​ទៅ​ជា Shortcode​ មួយ​ផង​ដែរ ដោយ​ប្រើប្រាស់ formatting៖

[title icon='check']My Title[/title]

សូម​បញ្ជាក់​ផង​ដែរ​ថា នា​ពេល​នេះ​ យើង​ប្រើប្រាស់ opening Shortcode​ tag ជាមួយ​នឹង parameter icon និង​​ត្រូវ​ការ closing Shortcode​ tag វិញ។ ចំណែក​ឯ content “My Title” គឺ​នឹង​ត្រូវ​បាន​បញ្ជូន​ទៅ​ជា output សម្រាប់ second parameter ហើយ​ត្រូវ​បាន​ប្រើប្រាស់​ជា content នៅ​ក្នុង level one heading វិញ។

add_shortcode( ‘title', ‘title_output' );
function title_output( $atts$content ) {
$atts = shortcode_atts( array(
‘icon' => ‘pencil'
), $atts );
return ‘<h1><span class="fa fa-' . $atts[‘icon'] . '">' . $content . ‘</h1>';
}

ការ​អនុវត្ត​ការ​ប្រើប្រាស់

ការប្រើប្រាស់​របស់ Shortcode​s​ មាន​ច្រើន ដោយ​រាប់​ចាប់​ពីការ placing sliders និង galleries ទៅ​ក្នុង post, ការ​ធ្វើ​ countdown timer ឫ content ប្រភេទ dynamicដ​ទៃ​ផ្សេង​ទៀត​ ជា​ដើម ដែល​ជា​ទូ​ទៅ​ត្រូវ​ការ Javascript និង CSS ដើម្បី​ដំណើរ​ការ​បាន​រលូន។

ឧបមា​ថា លោកអ្នក​ចង់​សរសេរ​ការ review​ អំពី game នោះ​នៅ​ក្នុង​អត្ថបទ​នីមួយៗ លោកអ្នក​នឹង​ត្រូវ​ការ​បញ្ចូល​តារាង​ដូច​នេះ៖

<table>
<tr>
<th>Title</th>
<th>Developer</th>
<th>Genre</th>
<th>Price</th>
<th>Our Verdict</th>
</tr>
<tr>
<td>Never Alone</td>
<td>Upper One Games</td>
<td>Indie Casual Adventure</td>
<td>$14.99</td>
<td>5/5</td>
</tr>
</table>

ជំនួសឲ្យ​ការ copy-paste នូវ table របស់​លោកអ្នក​ លោកអ្នក​អាច​ប្រើប្រាស់ Shortcode​៖

[final_table title="Never Alone" dev="Upper One Games" genre="Upper One Games" price="14.99" rating="5"]

Shortcode​ output function របស់​លោកអ្នក​​គួរ​តែ​មាន​ទម្រង់​បែប​នេះ៖

add_shortcode( ‘final_table', ‘final_table_output');
function final_table_output( $atts ) {
return ‘
<table>
<tr>
<th>Title</th>
<th>Developer</th>
<th>Genre</th>
<th>Price</th>
<th>Our Verdict</th>
</tr>
<tr>
<td>' . $atts[‘title'] . '</td>
    <td>' . $atts[‘dev'] . '</td>
<td>' . $atts[‘genre'] . '</td>
    <td>$' . $atts[‘price'] . '</td>
<td>5/' . $atts[‘rating'] . '</td>
</tr>
</table>
';
}

ជា​ចុងក្រោយ សំបុក​អាយធី សង្ឃឹម​និង​ជឿជាក់​ថា Shortcode​s និង​ក្លាយ​ជា​មធ្យោបាយ​ថ្មី​មួយ​សម្រាប់​លោកអ្នក​មិត្ត​អ្នក​ប្រើប្រាស់ wordpress ពិ​សេស​លោកអ្នក​ដែល​មិន​មែន​ជា coder ក្នុង​ការ​បង្កើត​ប្រសិទ្ធិភាព​ការងារ​របស់​លោកអ្នក​បាន​កាន់​តែ​ប្រសើរ​ឡើង​ថែម​មួយ​កម្រិត ដូច​នេះ​កុំ​ភ្លេច​ចុច LIKE 😉

អានថែមទៀត

របៀប​បិទ Editor នៅក្នុង WordPress មិនឲ្យកែប្រែកូដបាន

ជាទូទៅ រាល់​កំណែប្រែ​របស់​ WordPress ឯកជន (wordpress.org) គឺតែង​តែ​អនុញ្ញាត​ឲ្យ​លោកអ្នក ធ្វើការ​កែប្រែ​កូដ​ដោយ​ផ្ទាល់ នៅលើ WordPress Dashboard ។ ប៉ុន្តែចំនុចនេះ អាចជាបញ្ហា​ដល់​អ្នក​ដែល​មិនចេះកូដ ចេះតែកែ​ដោយ​ឥត​ប្រុង​ប្រយ័ត្ន ត្រឹមត្រូវ …

Leave a Reply