szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » cms » wordpress » egyedi_widgetek
Nyomvonal:
oktatas:web:cms:wordpress:egyedi_widgetek

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

oktatas:web:cms:wordpress:egyedi_widgetek [2023/03/18 22:11] – létrehozva adminoktatas:web:cms:wordpress:egyedi_widgetek [2023/03/18 22:14] (aktuális) – [A WordPress] admin
Sor 8: Sor 8:
   * Web: https://szit.hu   * Web: https://szit.hu
  
-===== A WordPress =====+ 
 + 
 + 
 +===== A WP_Widgets osztály ===== 
 + 
 +A saját widgetünket az alkalmazott téma functions.php állomány 
 +végén kell elhelyeznünk. A twentyseventeen téma esetén ez: 
 + 
 +  *  /wp-content/themes/twentyseventeen/functions.php 
 + 
 +Az osztály neve tetszőleges, de örökítjük a WP_Widget osztályt: 
 + 
 +<code php> 
 +... 
 +class sajat_widget extends WP_Widget { 
 +    //Ide kerülnek a függvények 
 +} 
 +</code> 
 + 
 +A következőkben áttekintjük milyen függvényeket kell létrehoznunk. 
 + 
 +===== Konstruktor hozzáadása ===== 
 + 
 +A konstruktorban állíthatjuk be a widget nevét és leírását, amit 
 +a beállításoknál látunk viszont.  
 + 
 +<code php> 
 +function __construct() { 
 +    parent::__construct( 
 +        'sajat_widget', 
 +        __('Példa Widget', 'sajat_widget_domain'), 
 +        array('description' => __('szit.hu Példa Widget', 
 +        'sajat_widget_domain'), ) 
 +    ); 
 +} 
 +</code> 
 + 
 +===== widget() hozzáadása ===== 
 + 
 +A widget() függvény meghatározza az egyéni widget megjelenítését.  
 + 
 +<code php> 
 +public function widget($args, $instance) { 
 +    $title = apply_filters('widget_title', $instance['title']); 
 +    echo $args['before_widget']; 
 +     
 +    if( !empty($title)) { 
 +        echo $args['before_title'] . $title . $args['after_title']; 
 +    } 
 +    echo __('Üdv a szit.hu üdvözlet', 'sajat_widget_domain'); 
 +    echo $args['after_widget']; 
 +} 
 +</code> 
 + 
 +===== Űrlap hozzáadása ===== 
 + 
 +Szintén a beállításoknál a widget beállítási lehetőségét adjuk meg. 
 + 
 +Ezt a form() függvényben végezzük el, egy szöveget fogunk bekérni, 
 +egy egy alapértelmezett szöveget is megadunk. 
 + 
 +<code php> 
 +public function form($instance) { 
 +    if(isset($instance['title'])) { 
 +        $title = $instance['title']; 
 +    }else { 
 +        $title = __('Alapértelmezett szöveg', 'sajat_widget_domain'); 
 +    } 
 +    ?> 
 +    <p> 
 +    <label>Üdvözlő szöveg</lable> 
 +    <input id="<?php $this->get_field_id('title'); ?>" 
 +    name="<?php echo $this->get_field_name('title'); ?>" 
 +    type="text" 
 +    value="<?php echo esc_attr($title); ?>" > 
 +    </p> 
 +    <?php 
 +} 
 +</code> 
 + 
 + 
 +===== Frissítés hozzáadása ===== 
 + 
 +Frissíti a widget-t, amikor frissülnek a beállítások. 
 + 
 +<code php> 
 +public function update($new_instance, $old_instance) { 
 +    $instance = array(); 
 +    $instance['title'] = (!empty($new_instance['title'])) ? 
 +    strip_tags($new_instance['title']) : ''; 
 +    return $instance; 
 +} 
 +</code> 
 + 
 + 
 +===== Az egyedi widget regisztrációja ===== 
 + 
 +Az egyedi widgetünket regisztrálni kell a WordPress-ben. 
 +Ezt szintén a function.php függvényben kell megtenni, de már 
 +osztályon kívül. 
 + 
 +<code php> 
 +function sajat_register_widget() { 
 +    register_widget('sajat_widget'); 
 +} 
 + 
 +add_action('widgets_init', 'sajat_register_widget'); 
 +</code> 
 + 
 + 
 +===== Egyben ===== 
 + 
 + 
 +<code php wp-content/themes/twentyseventeen/functions.php> 
 +<?php 
 +//... 
 + 
 +class sajat_widget extends WP_Widget { 
 + 
 +    function __construct() { 
 +        parent::__construct( 
 +            'sajat_widget', 
 +            __('Példa Widget', 'sajat_widget_domain'), 
 +            array('description' => __('szit.hu Példa Widget', 
 +            'sajat_widget_domain'), ) 
 +        ); 
 +    } 
 + 
 +    public function widget($args, $instance) { 
 +        $title = apply_filters('widget_title', $instance['title']); 
 +        echo $args['before_widget']; 
 +         
 +        if( !empty($title)) { 
 +            echo $args['before_title'] . $title . $args['after_title']; 
 +        } 
 +        echo __('Üdv a szit.hu üdvözlet', 'sajat_widget_domain'); 
 +        echo $args['after_widget']; 
 +    } 
 + 
 +    public function form($instance) { 
 +        if(isset($instance['title'])) { 
 +            $title = $instance['title']; 
 +        }else { 
 +            $title = __('Alapértelmezett szöveg', 'sajat_widget_domain'); 
 +        } 
 +        ?> 
 +        <p> 
 +        <label>Üdvözlő szöveg</lable> 
 +        <input id="<?php $this->get_field_id('title'); ?>" 
 +        name="<?php echo $this->get_field_name('title'); ?>" 
 +        type="text" 
 +        value="<?php echo esc_attr($title); ?>" > 
 +        </p> 
 +        <?php 
 +    } 
 + 
 +    public function update($new_instance, $old_instance) { 
 +        $instance = array(); 
 +        $instance['title'] = (!empty($new_instance['title'])) ? 
 +        strip_tags($new_instance['title']) : ''; 
 +        return $instance; 
 +    } 
 +} 
 + 
 + 
 +function sajat_register_widget() { 
 + register_widget('sajat_widget'); 
 +} 
 + 
 +add_action('widgets_init', 'sajat_register_widget'); 
 + 
 +</code> 
 + 
 +A fentiek szerint, mentsük a functions.php fájlba, majd 
 +nézzük meg a widgeteket. Megtaláljuk a sajátunkat.  
 + 
 + 
 + 
 + 
 +===== Linkek ===== 
 +  * https://developer.wordpress.org/themes/functionality/widgets/ (2021) 
  
  
oktatas/web/cms/wordpress/egyedi_widgetek.1679173909.txt.gz · Utolsó módosítás: 2023/03/18 22:11 szerkesztette: admin