Kategorie: Snippets

Custom Post Types richtig integrieren

7. September 2014 by Raffael·Keine Kommentare

Custom Post Types sind eine gute Möglichkeit, um in WordPress spezielle, wiederkehrende Artikelmuster zu veröffentlichen. Egal ob es sich um eine DVD-Review mit Bewertungsskala, Kochrezepte oder eine Downloadseite handelt. Custom Post Types können an diversen Stellen einen Sinn ergeben und sind relativ einfach erstellt.

Die Erstellung eines Custom Post Types ist jedoch nur die halbe Miete. Zwar lassen sich nach der Erstellung direkt Artikel im neuen Format erstellen, jedoch werden diese Artikel an diversen Stellen im WordPress-System nicht beachtet. Um Custom Post Types an allen wichtigen Stellen im WordPress-System konsequent einzuführen, sind ein paar Änderungen nötig, die ich nachfolgend kurz erklären will.

Custom Post Types in WordPress Suche aufnehmen

Um Custom Post Types in der normalen WordPress-Suche anzuzeigen, ist es nötig, einen Filter auf die the_search_query-Funktion zu setzen. Dies macht man am besten in der functions.php des jeweiligen Themes.

function custom_type_suche( $query ) {
 if ( $query->is_search ) { $query->set( 'post_type', array( 'site', 'plugin', 'theme', 'person' )); } 
 return $query;
}
add_filter( 'the_search_query', 'custom_type_suche' );

function custom_type_suche( $query ) {

if ( $query->is_search ) { $query->set( 'post_type', array( 'site', 'plugin', 'theme', 'person' )); }

return $query;

}

add_filter( 'the_search_query', 'custom_type_suche' );

Nach dem Einfügen des obigen Codes, sollten eure Custom Post Types auch in der WordPress Suche angezeigt werden.

Custom Post Types in RSS-Feed ausgeben

Eine weitere Stelle, an der Custom Post Types standardmäßig nicht auftauchen, ist der RSS-Feed eines WordPress Blogs. Hier schafft ein Filter auf request Abhilfe.

function rss_request_filter( $vars ) {
 if (isset($vars['feed']) && !isset($vars['post_type']))
  $vars['post_type'] = array( 'post', 'site', 'plugin', 'theme', 'person' );
 return $vars;
}
add_filter( 'request', 'rss_request_filter' );

function rss_request_filter( $vars ) {

if (isset($vars['feed']) && !isset($vars['post_type']))

$vars['post_type'] = array( 'post', 'site', 'plugin', 'theme', 'person' );

return $vars;

}

add_filter( 'request', 'rss_request_filter' );

Um Custom Post Types im RSS-Feed auszugeben ist oben stehender Code in die functions.php des jeweiligen Themes einzufügen.

Custom Post Types im „Auf einen Blick“-Widget anzeigen

Um Artikel, die im Custom Post Type Format verfasst sind, auch im „Auf einen Blick“-Widget im Dashboard des Backends anzeigen zu können, ist etwas mehr Code nötig.

function wph_right_now_content_table_end() {
 $args = array(
  'public' => true ,
  '_builtin' => false
 );
 $output = 'object';
 $operator = 'and';
 $post_types = get_post_types( $args , $output , $operator );
 foreach( $post_types as $post_type ) {
  $num_posts = wp_count_posts( $post_type->name );
  $num = number_format_i18n( $num_posts->publish );
  $text = _n( $post_type->labels->singular_name, $post_type->labels->name , intval( $num_posts->publish ) );
  if ( current_user_can( 'edit_posts' ) ) {
   $num = "<a href='edit.php?post_type=$post_type->name'>$num</a>";
   $text = "<a href='edit.php?post_type=$post_type->name'>$text</a>";
  }
  echo '<tr><td class="first num b b-' . $post_type->name . '">' . $num . '</td>';
  echo '<td class="text t ' . $post_type->name . '">' . $text . '</td></tr>';
 }
 $taxonomies = get_taxonomies( $args , $output , $operator ); 
 foreach( $taxonomies as $taxonomy ) {
  $num_terms  = wp_count_terms( $taxonomy->name );
  $num = number_format_i18n( $num_terms );
  $text = _n( $taxonomy->labels->singular_name, $taxonomy->labels->name , intval( $num_terms ));
  if ( current_user_can( 'manage_categories' ) ) {
   $num = "<a href='edit-tags.php?taxonomy=$taxonomy->name'>$num</a>";
   $text = "<a href='edit-tags.php?taxonomy=$taxonomy->name'>$text</a>";
  }
  echo '<tr><td class="first b b-' . $taxonomy->name . '">' . $num . '</td>';
  echo '<td class="t ' . $taxonomy->name . '">' . $text . '</td></tr>';
 }
}
add_action( 'right_now_content_table_end' , 'wph_right_now_content_table_end' );

function wph_right_now_content_table_end() {

$args = array(

'public' => true ,

'_builtin' => false

);

$output = 'object';

$operator = 'and';

$post_types = get_post_types( $args , $output , $operator );

foreach( $post_types as $post_type ) {

$num_posts = wp_count_posts( $post_type->name );

$num = number_format_i18n( $num_posts->publish );

$text = _n( $post_type->labels->singular_name, $post_type->labels->name , intval( $num_posts->publish ) );

if ( current_user_can( 'edit_posts' ) ) {

$num = "<a href='edit.php?post_type=$post_type->name'>$num</a>";

$text = "<a href='edit.php?post_type=$post_type->name'>$text</a>";

}

echo '<tr><td class="first num b b-' . $post_type->name . '">' . $num . '</td>';

echo '<td class="text t ' . $post_type->name . '">' . $text . '</td></tr>';

}

$taxonomies = get_taxonomies( $args , $output , $operator );

foreach( $taxonomies as $taxonomy ) {

$num_terms = wp_count_terms( $taxonomy->name );

$num = number_format_i18n( $num_terms );

$text = _n( $taxonomy->labels->singular_name, $taxonomy->labels->name , intval( $num_terms ));

if ( current_user_can( 'manage_categories' ) ) {

$num = "<a href='edit-tags.php?taxonomy=$taxonomy->name'>$num</a>";

$text = "<a href='edit-tags.php?taxonomy=$taxonomy->name'>$text</a>";

}

echo '<tr><td class="first b b-' . $taxonomy->name . '">' . $num . '</td>';

echo '<td class="t ' . $taxonomy->name . '">' . $text . '</td></tr>';

}

add_action( 'right_now_content_table_end' , 'wph_right_now_content_table_end' );

Nun sollten auch die Custom Post Types mitgezählt und ausgewertet werden.

YouTube Videos responsive in WordPress

28. August 2014 by Raffael·Keine Kommentare

Nachdem wir letztens einen Artikel dazu hatten, wie man Google Maps responsive in WordPress einbindet, soll es heute darum gehen wie man YouTube Videos responsive in WordPress einbinden kann.

Von Haus aus passen sich Youtube-Videos nämlich derzeit immer noch nicht der Größe der umgebenden Website an. So bringt einem das schönste Responsive Theme für den eigenen WordPress-Blog nichts, wenn das Layout am Ende doch wieder von einem YouTube-Video zerfleddert wird. Doch das muss nicht sein…

Der nachfolgende Lösungsansatz gleicht dem Ansatz zur responsiven Einbindung von Google Maps in großen Teilen. Dennoch gibt es ein paar kleine Unterschiede, weshalb ich der Thematik diesen Artikel hier widme.

YouTube Videos responsive machen per DIV-Wrapper

Um zu erreichen, dass YouTube Videos sich auch in WordPress Artikeln und Seiten responsive verhalten, sprich ihr Größe den Maßen der Webseite und des umgebenden Browserfensters anpassen, müssen diese in einem div-Container eingefasst werden.

Der div-Container wiederum wird mit ein paar CSS-Befehlen versehen, sodass er sich in seiner Größe den äußeren Elementen entsprechend anpasst.

Das oben stehende Video zeigt, wie sich ein YouTube-Video in der Praxis verhält, wenn es mit nachfolgender Methode eingebunden wurde.

YouTube responsive Embed-Code

Der div-Container sieht wie folgt aus:

<div class="yt-responsive">
    <!-- An dieser Stelle YouTube Embed-Code einfügen -->
</div>

</div>

Der HTML-Kommentar muss im Artikel dann natürlich noch durch den normalen YouTube-Embed Code ersetzt werden. Hierbei bitte darauf achten, die Iframe-Variante des Embed-Codes auszuwählen!

Der entsprechende CSS-Code wird am besten in der custom.css des jeweiligen Themes ausgelagert.

.yt-responsive { 
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.yt-responsive iframe { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.yt-responsive {

position: relative;

padding-bottom: 56.25%;

padding-top: 25px;

height: 0;

}

.yt-responsive iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Alle WordPress-Einstellungen im Backend anzeigen

27. August 2014 by Raffael·Keine Kommentare

Mit folgendem Snippets, lässt sich im Einstellungsmenü des WordPress-Backends ein Link hinzufügen, der alle WordPress-Einstellungen auf einer Seite anzeigt.

Zwar sind die Felder auf der neu angelegten Seite mit allen Einstellungen nicht immer ideal bzw. sprechend benamt, dafür bekommt man aber sehr schnell einen Überblick über alle gesetzten Parameter.

Wie die fertige/neue Übersichtsseite mit allen Einstellungen aussieht, kann man im Artikelbild dieses Beitrags erkennen.

Alle WordPress-Einstellungen einblenden

Der Code kann zum Beispiel in der functions.php eines Themes platziert werden. Wenn alles geklappt hat, taucht im Menüpunkt „Einstellungen“ im Backend ein weiterer Link namens „Einstellungen“ auf.

function alle_einstellungen_anzeigen() {
    add_options_page(__('All Settings'), __('All Settings'), 'administrator', 'options.php');
}
add_action('admin_menu', 'alle_einstellungen_anzeigen');

function alle_einstellungen_anzeigen() {

add_options_page(__('All Settings'), __('All Settings'), 'administrator', 'options.php');

}

add_action('admin_menu', 'alle_einstellungen_anzeigen');

WordPress Login – Logo und Link anpassen

26. August 2014 by Raffael·40 Kommentare

Auch die Login-Seite einer WordPress Installation lässt sich mittels einiger Filter relativ schnell und komfortabel anpassen. Mit folgenden Snippets können sowohl das Logo als auch der Link, der hinter dem Logo/Header liegt angepasst werden.

Der Code kann entweder in der functions.php eines Themes oder noch besser im Rahmen eines eigenen Plugins eingefügt werden. Die Plugin-Variante hat den Vorteil, dass die Änderungen an der Login-Seite bestehen bleiben, auch wenn das Theme gewechselt wird.

WordPress Login – Logo austauschen

Um ein eigenes Logo auf der WordPress Login-Seite zu setzen, dient folgendes Snippet:

add_action( 'login_head', 'namespace_login_style' );
function namespace_login_style() {
    echo '<style>.login h1 a { background-image: url( ';
    echo get_template_directory_uri() . '/images/logo.png';
    echo ' ) !important; }</style>';
}

add_action( 'login_head', 'namespace_login_style' );

function namespace_login_style() {

echo '<style>.login h1 a { background-image: url( ';

echo get_template_directory_uri() . '/images/logo.png';

echo ' ) !important; }</style>';

}

In der vierten Zeile des Snippets steht der Pfad zur Logo-Datei. Hier kann natürlich auch eine komplett URL angegeben werden statt den Pfad zusammenzusetzen. Das könnte dann wie folgt aussehen:

add_action( 'login_head', 'namespace_login_style' );
function namespace_login_style() {
    echo '<style>.login h1 a { background-image: url( ';
    echo 'http://wp-guru.net/wp-content/uploads/2014/08/wp-guru-login-logo1.png';
    echo ' ) !important; }</style>';
}

add_action( 'login_head', 'namespace_login_style' );

function namespace_login_style() {

echo '<style>.login h1 a { background-image: url( ';

echo 'http://wp-guru.net/wp-content/uploads/2014/08/wp-guru-login-logo1.png';

echo ' ) !important; }</style>';

}

WordPress Login – Link und Title ändern

Um den Link sowie das Title-Attribut zu ändern, das hinter dem Logo auf WordPress Login-Seite liegt, dienen folgende beide WordPress Filter. Der erste Filter passt den Link bzw. die Url an, der zweite das Title-Attribute des Logos.

add_filter( 'login_headerurl', 'namespace_login_headerurl' );
function namespace_login_headerurl( $url ) {
    $url = home_url( '/' );
    return $url;
}

add_filter( 'login_headerurl', 'namespace_login_headerurl' );

function namespace_login_headerurl( $url ) {

$url = home_url( '/' );

return $url;

}

Statt home_url(‚/‘) zum Auslesen der Blog-URL in Zeile 3 kann auch jede beliebige andere URL angegeben werden.

add_filter( 'login_headertitle', 'namespace_login_headertitle' );
function namespace_login_headertitle( $title ) {
    $title = get_bloginfo( 'name' );
    return $title;
}

add_filter( 'login_headertitle', 'namespace_login_headertitle' );

function namespace_login_headertitle( $title ) {

$title = get_bloginfo( 'name' );

return $title;

}

Anstelle von get_bloginfo( ’name‘ ) in Zeile 3 kann auch ein beliebiger String ausgegeben werden.

Login-Logo mit Seiten-Logo ersetzen

Wenn der Blog ein eigenes Header-Bild besitzt, dann kann dieses auch automatisch für die Login-Seite verwendet werden. Hierzu ist die Funktion namespaceloginstyle() aus oben stehendem Beispiel durch folgende Funktion zu ersetzen:

function namespace_login_style() {
    if( function_exists('get_custom_header') ){
        $width = get_custom_header()->width;
        $height = get_custom_header()->height;
    } else {
        $width = HEADER_IMAGE_WIDTH;
        $height = HEADER_IMAGE_HEIGHT;
    }
    echo '<style>'.PHP_EOL;
    echo '.login h1 a {'.PHP_EOL; 
    echo '  background-image: url( '; header_image(); echo ' ) !important; '.PHP_EOL;
    echo '  width: '.$width.'px !important;'.PHP_EOL;
    echo '  height: '.$height.'px !important;'.PHP_EOL;
    echo '  background-size: '.$width.'px '.$height.'px !important;'.PHP_EOL;
    echo '}'.PHP_EOL;
    echo '</style>'.PHP_EOL;
}

function namespace_login_style() {

if( function_exists('get_custom_header') ){

$width = get_custom_header()->width;

$height = get_custom_header()->height;

} else {

$width = HEADER_IMAGE_WIDTH;

$height = HEADER_IMAGE_HEIGHT;

}

echo '<style>'.PHP_EOL;

echo '.login h1 a {'.PHP_EOL;

echo ' background-image: url( '; header_image(); echo ' ) !important; '.PHP_EOL;

echo ' width: '.$width.'px !important;'.PHP_EOL;

echo ' height: '.$height.'px !important;'.PHP_EOL;

echo ' background-size: '.$width.'px '.$height.'px !important;'.PHP_EOL;

echo '}'.PHP_EOL;

echo '</style>'.PHP_EOL;

}

Kategorie: Snippets

Custom Post Types in WordPress Suche aufnehmen

Custom Post Types in RSS-Feed ausgeben

Custom Post Types im „Auf einen Blick“-Widget anzeigen

YouTube Videos responsive machen per DIV-Wrapper

YouTube responsive Embed-Code

Alle WordPress-Einstellungen einblenden

WordPress Login – Logo austauschen

WordPress Login – Link und Title ändern

Login-Logo mit Seiten-Logo ersetzen

Floating Social Bar Facebook-Button ausrichten