WordPress 3 Button Widget

Christian Böttger 24 Apr 2014 0 Kommentare
7 Stimmen (4.43 von 5.00)

Wie ihr auf der rechten Seite des Templates seht, habe ich ein neues 3 Button Widget dort platziert. Da ich überall gesucht habe und nicht das passende Plugin gefunden habe, dachte ich mir, mach dir selbst eins und nutze gleich mal die Chance euch das hier zu zeigen wie ich es gemacht habe.

Plugin 3 Button Widget erstellen:

Als erstes benötigen wir erst mal einen Ordner, diesen erstellen wir in diesem Ordner /wp-content/plugins/ und nennen ihn 3-button-widget. Nun benötigen wir noch 2 Dateien für die einzelnen Scripte, diese erstellen wir in dem zuvor erstellten Ordner.

  • 3-button-widget.php
  • 3-button-widget.css

Dies sind erst mal die Dateien die wir benötigen für unser 3 Button Widget, jetzt können wir uns an die einzelnen Code Abschnitte machen.

 

Code für das 3 Button Widget:

3-Button-Widget.php erstellen

Als erstes fügen wir die allgemeinen Informationen in den Kopf unser PHP Datei ein, damit diese auch über WordPress gefunden wird. Dazu benötigen wir diesen Code.

/**
 * Plugin Name: 3 Button Widget
 * Description: A widget that display 3 Button with New Article, Category and Author
 * Version: 0.1
 * Author: Christian Böttger
 * Author URI: http://www.howto-blog.de
 */

Als nächstes brauchen wir eine Funktion, um die letzten Beiträge aus der Datenbank auszulesen. Das machen wir mit diesem Code.

function get_latest_posts($limit = 3)
{
	$latest_posts = get_posts('numberposts=' . $limit);

	foreach($latest_posts as $post)
	{
		$post_title = $post->post_title;
		$post_permalink = get_permalink($post->ID);

		$output .= '<li><a href="' . $post_permalink . '" title="Artikel: ' . $post_title . '">' . $post_title . '</a></li>';
	}

	return $output;
}

Da wir in diesem Blog mehrere Autoren sind, habe ich mich entschlossen diese auch hier zu benennen. Dazu brauchen wir auch eine Funktion um diese aus der Datenbank auszulesen und wieder zu geben.

function contributors() {
  global $wpdb;
 
  $authors = $wpdb->get_results("SELECT ID, user_nicename, user_url from $wpdb->users ORDER BY display_name");
 
  foreach($authors as $author) {
    $user_id = $author->ID;
    $user_level = '7';
    $key = 'wp_user_level';
    $single = true;
    $user_last = get_user_meta( $user_id, $key, $single );
    $user_post_count = count_user_posts( $user_id );
    if ( $user_last >= $user_level ) { ?>
      <li>
        <?php echo get_avatar($author->ID); ?>
        <a href="<?php echo $author->user_url; ?>" target="_blank"><?php echo the_author_meta('display_name', $author->ID); ?></a><br>
        <span>Artikel verfasst: <?php echo $user_post_count; ?></span>
      </li>
    
    <?php } else {
      
    }
    
  }
}

Nun müssen wir das 3 Button Widget noch initialisieren und überprüfen, das machen wir mit diesem Teil des Quelltextes.

function widget_sidebar_init() {
  if ( !function_exists('register_sidebar_widget') ) return;

Jetzt müssen wir unsere Stylesheet noch registrieren, damit es auch im Header unserer Homepage geladen wir und das 3 Button Widget auch richtig angezeigt wir.

add_action( 'wp_enqueue_scripts', 'register_plugin_style' );

  /**
    * Register 3 Button Widget Scripts.
  */
  function register_plugin_style() {
	 wp_register_style( '3-Button-Widget', plugins_url( '3-button-widget/3-button-widget.css' ) );
	 wp_enqueue_style( '3-Button-Widget' );
  }

Danach müssen wir unser Widget anweisen auch etwas auszugeben,die Funktion schließen und das Widget an WordPress übergeben. Das machen wir wie folgt.

function widget_sidebar() {
    
    // Hier kann man eigenen Code einfuegen
?>
        <script>
          $(document).ready(function() {	
            $("#tabs li a:not(:first)").addClass("inactive");
            $(".button-container:not(:first)").hide();

            $("#tabs li a").click(function(){
              var t = $(this).attr("href");
              $("#tabs li a").addClass("inactive");		
              $(this).removeClass("inactive");
              $(".button-container").hide();
              $(t).fadeIn("slow");
              return false;
            });

            if($(this).hasClass("inactive")){ //this is the start of our condition 
              $("#tabs li a").addClass("inactive");		 
              $(this).removeClass("inactive");
              $(".button-container").hide();
              $(t).fadeIn("slow");	
            }
          });
        </script>
        <div>
          <ul id="tabs">
            <li><a href="#tab1">Neue Beiträge</a></li>
            <li><a href="#tab2">Kategorien</a></li>
            <li><a href="#tab3">Autoren</a></li> 
          </ul>
          <div class="button-container" id="tab1">
            <ul>
              <li><a href="http://www.howto-blog.de/neuste-beitraege/" title="Die neusten Beiträge">Alle Beiträge (neuste zuerst)</a></li>
              <?php echo get_latest_posts(7); ?>
            </ul>
          </div>
          
          <div class="button-container" id="tab2">
            <ul>
              <?php wp_list_categories('orderby=name&show_count=1&hide_empty=1&depth=-1&title_li='); ?> 
            </ul>
          </div>
        
          <div class="button-container autorlist" id="tab3">
            <ul>
              <?php contributors(); ?>
            </ul>
          </div>
        </div>
    
<?php    
  }

  register_sidebar_widget('3 Button Widget', 'widget_sidebar');
}

add_action('plugins_loaded', 'widget_sidebar_init');
?>

Damit ist die 3-button-widget.php fertig und wir können mit dem Styling fortfahren.

 

3-button-widget.css erstellen:

Nun machen wir erst einmal das Style des Kopfes für unser Widget, dazu speichern wir folgenden Code in unsere 3-button-widget.css Datei.

#tabs { 
	border:1px solid #ccc; 
	height:18px; 
	background:#eff5f9; 
	padding-left: 25px;
	padding-top: 20px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}

#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right: 5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:10px;
	font-weight:bold; 
	color:#000000; 
        padding: 7px 7px 15px 7px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

#tabs li a.inactive {
	padding-top:5px;
        padding-bottom: 10px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Als nächstes müssen wir nun unsere Container, wo der Inhalt geladen werden soll, noch das Aussehen verpassen und positionieren.

.button-container { 
	clear: both; 
  background-color: #ffffff; 
  border-bottom-left-radius:4px;  
	border-bottom-right-radius:4px; 	 
}

.button-container ul {
  padding-top: 15px;
  padding-bottom: 15px;
}

.button-container li {
  margin: 15px;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}

.button-container a, .button-container a:hover {
  display: inline-block;
  margin-left: 15px;
}

Und zum Schluss braucht unsere Autorenliste auch noch das Aussehen und dazu brauchen wir diesen Code.

.autorlist {
  clear: both; 
  background-color: #ffffff; 
  border-bottom-left-radius:4px;  
	border-bottom-right-radius:4px;
}

.autorlist ul {
  padding-top: 15px;
  padding-bottom: 15px;
}

.autorlist li {
  margin: 15px;
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}

.autorlist img {
    width: 40px;
    height: 40px;
    float: left;
}

.autorlist span {
  margin-left: 15px;
}

3 button widget

 Somit haben wir unser 3 Button Widget fertig und können dieses über die WordPress Administrationsseite in unser Template einfügen. Dieses kleine Widget kann natürlich noch weiter optimiert werden und soll euch nur als kleiner Ansatz dienen.

Artikel drucken

Kommentare (0)