Přihlašovací formulář jako widget do sidebaru

Pokud jste již řešili, jak umožnit uživatelům, jak se přihlásit přímo z hlavní strany internetové stránky, určitě jste použili jeden z volně dostupných pluginů. My si dnes ukážeme, jak vytvořit widget bez nutnosti instalovat plugin. Widget si budeme moci zobrazit v jakémkoliv definovaném sidebaru.

Nejprve si ve složce šablony, kterou budeme používat, vytvoříme složku widgets. Náš widget si pojmenujeme Login Form, což asi není originální, ale pro naše potřeby to stačí. Do složky uložíme soubor widget-login-form.php, který je zatím prázdý. Nyní ho začneme zaplňovat.

Na začátek souboru vložíme údaje, s popisem a názvem widgetu. Tato část je důležitá, podle ní wordpress definuje widget:

/*-----------------------------------------------------------------------------------
 
Plugin Name: Sidebar login form
Plugin URI: 
Description: A widget with login form
Version: 1.0
Author: 
Author URI: 
 
-----------------------------------------------------------------------------------*/

Následně widget zaregistrujeme:

// Register widget
function vm_login_form_widgets() {
register_widget( 'vm_Login_Form_Widget' );
}

Přidáme incializaci widgetu:

// Add function to widgets_init that'll load our widget
add_action( 'widgets_init', 'vm_login_form_widgets' );

Všechny widgety vychází z třídy WP_Widget, kterou pomocí nové třídy rozšíříme:

// Widget class
class vm_login_form_widget extends WP_Widget {
}

Přípravu máme hotovou a nyní si do třídy vytvoříme funkce, které definují vlastní widget.
Vytvoříme funkci se stejným názvem, který jsme použili při registraci widgetu a která definuje základní vlastnosti widetu:

function vm_Login_Form_Widget() {
 
// Widget settings
$widget_ops = array(
'classname' => 'vm_login_form_widget',
'description' => __('A widget display login form in sidebar.', 'theme')
);
 
// Widget control settings
$control_ops = array(
'width' => 259,
'height' => 200,
'id_base' => 'vm_login_form_widget'
);
 
// Create the widget
$this->WP_Widget( 'vm_login_form_widget', __('Login Form', 'theme'), 
        $widget_ops, $control_ops );
 
}
Čtěte  Jak vytvořit vlastní šablonu pro WordPress – 3 díl
// Widget settings $widget_ops = array( 'classname' => 'vm_login_form_widget', 'description' => __('A widget display login form in sidebar.', 'theme') ); // Widget control settings $control_ops = array( 'width' => 259, 'height' => 200, 'id_base' => 'vm_login_form_widget' ); // Create the widget $this->WP_Widget( 'vm_login_form_widget', __('Login Form', 'theme'), $widget_ops, $control_ops ); }

Určitě jste si všimli, že všechny texty, které se budou zobrazovat, vkládáme pomocí __(), což je funkce překladu, díky tomu umožníte případný překlad šablony. Jak připravit šablonu pro překlad bude téma jednoho z dalších článků, ale již nyní se budeme snažit dělat widget připravený na překlad.
Další funkcí bude samotný widget:

function widget( $args, $instance ) {
extract( $args );
 
// Our variables from the widget settings
$title = apply_filters('widget_title', $instance['title'] );
 
// Before widget (defined by theme functions file)
echo $before_widget;
 
// Display the widget title if one was input
if ( $title )
echo $before_title . $title . $after_title;
 
  if ( is_user_logged_in() ) { global $current_user; get_currentuserinfo(); 
  echo '<p>'.__('Login as:','theme').' '.$current_user->user_login.' <br />
  <a href="'.wp_logout_url(home_url()).'">'.__('Logout','theme').'</a></p>'; 
 
  }else{
 
  echo'
  <form name="loginform" id="loginform" action="/wp-login.php" method="post">
    <p>
<label for="user_login">'.__('Username','theme').'<br>
<input type="text" name="log" id="user_login" class="input" 
        value="" size="20" tabindex="10"></label>
    </p>
    <p>
        <label for="user_pass">'.__('Password','theme').'<br>
<input type="password" name="pwd" id="user_pass" class="input" 
        value="" size="20" tabindex="20"></label>
    </p>
    <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" 
        value="'.__('Log In','theme').'" tabindex="100">
<input type="hidden" name="redirect_to" value="/wp-admin/">
<input type="hidden" name="testcookie" value="1">
    </p>
</form>';
}
 
// After widget (defined by theme functions file)
echo $after_widget;
}
Čtěte  Vypnutí standardních widgetů
// Our variables from the widget settings $title = apply_filters('widget_title', $instance['title'] ); // Before widget (defined by theme functions file) echo $before_widget; // Display the widget title if one was input if ( $title ) echo $before_title . $title . $after_title; if ( is_user_logged_in() ) { global $current_user; get_currentuserinfo(); echo '<p>'.__('Login as:','theme').' '.$current_user->user_login.' <br /> <a href="'.wp_logout_url(home_url()).'">'.__('Logout','theme').'</a></p>'; }else{ echo' <form name="loginform" id="loginform" action="/wp-login.php" method="post"> <p> <label for="user_login">'.__('Username','theme').'<br> <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10"></label> </p> <p> <label for="user_pass">'.__('Password','theme').'<br> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20"></label> </p> <p class="submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="'.__('Log In','theme').'" tabindex="100"> <input type="hidden" name="redirect_to" value="/wp-admin/"> <input type="hidden" name="testcookie" value="1"> </p> </form>'; } // After widget (defined by theme functions file) echo $after_widget; }

Nejprve zjistíme, zda je uživatel přihlášen, pokud ano, zobrazíme jeho nick a link na odhlášení. Pokud není přihlášen, zobrazíme formulář.
Předposlední funkcí, kterou budeme potřebovat, je update, která ukládá změny ve widgetu. My zde máme jen title, protože nic jiného nepotřebujeme:

Poslední je samotný formulář, který se bude zobrazovat po přidání widgetu do sidebaru v administraci:¨

function form( $instance ) {
 
// Set up some default widget settings
$defaults = array(
'title' => '',
);
 
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
 
 <p>
     <label for="<?php echo $this->get_field_id( 'title' ); ?>">
         <?php _e('Title:', 'theme') ?>
     </label>
     <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" 
     name="<?php echo $this->get_field_name( 'title' ); ?>" 
     value="<?php echo $instance['title']; ?>" />
 </p>
<?php
}

Poslední co musíme udělat je vložit do functions.phpp řádek s include widgetu:

include 'widgets/widget-login-form.php';

Tím máme za sebou vytvoření widgetu a pokud se nyní podíváme do administrace, uvidíme mezi ostatními widgety

Po přetažení do sidebaru se widget rozbalí a můžeme upravit titulek:

Po uložení se nám přihlašovací formulář krásně zobrazí v sidebaru:

Widget v akci si můžete prohlédnout zde
V některém z dalších článků si ukážeme, jak omezit přihlášenému uživateli přístup do administrace.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

3 Comments

  1. Lukenzi

    Hezký návod, díky. Máš tam ale jednu drobnou chybičku, v kódu formuláře by mělo být místo __(‚Password‘,’simple‘) tohle __(‚Password‘,’theme‘). A URL adresy v formuláři bych asi udělal raději absolutní pomocí WP funkcí, ale to je už jen taková drobnost :)

    Reply
  2. Pingback: Zobrazení posledních tweetů pomocí widgetu | Musilda.cz

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.