Browse Category

wordpress

Really Simple Gallery Widget

Mir hat das WordPress plugin „Flickr Badges Widget“ sehr gefallen, was die Darstellung der Bilder angeht. Was mir nicht gefällt, ist, dass man seine Bilder bei Flickr hochladen muss, um sie in WordPress anzuzeigen. Außerdem finde ich die Darstellung der Bilder in Flickr nicht so gut.

Daher habe ich geschaut, was es an Alternativen gibt.
Gefunden habe ich das plugin „really simple gallery widget“ von Helen Hou-Sandi.

Dieses stellt allerdings in dem theme, dass ich nutze, alle Bilder untereinander dar.
Aus diesem Grund habe ich das CSS etwas angepasst:

dl { 
overflow: hidden; 
padding: 0 5%; /* muss man nicht machen, aber so rutschen die Bilder mehr in die Mitte */ 
}
dt { 
float: left; 
margin: 5px; 
}

Schließlich habe ich noch die Größe der Bilder verändert. Ich nutze aus meinem theme Kotha die Größe xs-thumb, die 60×60 px groß ist. Dies habe ich in der functions.php auf 75x75px geändert:

// Post thumbnails
...
	add_image_size('xs-thumb', 60, 60, TRUE);

wird zu

// Post thumbnails
...
	add_image_size('xs-thumb', 75, 75, TRUE);

Am sichersten ist es natürlich, all diese Änderungen in einem child theme zu machen.

Anmelde-snippet im Theme Kotha

Wer das Anmelde-widget von WordPress nicht nutzen möchte, kann stattdessen das snippet

<?php wp_loginout() ; ?>

nutzen. Im Theme Kotha fügt man dies in der footer.php ein, und zwar nach

echo wp_kses( $copyright, $allowed_tags ); ?>

Bei mir sieht das so aus (ich füge mittels php noch ein „-“ ein) :

echo wp_kses( $copyright, $allowed_tags ); ?>

<?php echo (" - ") ?>

<?php wp_loginout() ; ?>

</p>

Besser ist es natürlich, das Ganze in einem child theme zu machen.

Code Prettify Hintergrundfarbe ändern

Wenn man das Theme Kotha benutzt und das Plugin Code Prettify, dann wird der Hintergrund der code-Schnipsel sehr dunkel dargestellt.

Wie es aussieht, kann man dies ändern, in dem man im Customizer von Kotha unter „Zusätzliches CSS“ den Zusatz

pre {
 background: #fff;
}

einfügt.

Besser ist es natürlich, ein child theme zu erstellen und das CSS dort einzufügen.

Worauf wartest Du eigentlich?

Für alle, die schon immer drüber nachgedacht haben, eigentlich auch mal zu bloggen:

Worauf wartest du?

http://lifecatcher.de/die-eigentlich-falle/

Vielleicht trifft nicht alles auf Dich zu, was dort steht, aber: Was spricht dagegen, WordPress zu lernen und einfach mal anzufangen?  Niemand erwartet den perfekten Blog mit einem Super-Design.

Ich zB schreibe im Moment hauptsächlich nur auf, wie ich meine sites programmiert habe, damit ich in einem halben Jahr auch noch weiß, was ich da eigentlich gemacht habe.

Nicht besonders originell, weil viele andere das auch machen, aber immerhin gut genug, als dass ich schon Rückfragen bekomme.

Ein child Theme für TwentyTwelve

Was habe ich gemacht ?

Die Kommentar-Funktion „Hinterlassen Sie eine Antwort“ wollte ich gern unter den Beitrags-Text haben, daher habe ich

<?php if ( comments_open() ) : ?>
 <div class="comments-link">
 <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
 </div><!-- .comments-link -->
 <?php endif; // comments_open() ?>

von seiner ursprünglichen Position weiter nach unten unter

<footer class="entry-meta">

verschoben. Dann habe ich noch ein </br> darunter gefügt, damit der Abstand zum folgenden Satz etwas größer wird.

Verschieben des Menüs unter das header-Bild.

Dazu habe ich das

<nav id="site-navigation" class="main-navigation" role="navigation">
 <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
 <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
 <?php ohneinwp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 </nav><!-- #site-navigation -->

von seiner Position oberhalb des

<?php if ( get_header_image() ) : ?>
 ...
 <?php endif; ?>

einfach darunter verschoben.

Noch zu erledigen:

Um den Satz „Dieser Beitrag wurde unter … abgelegt.“ zu ändern, muss man in der functions.php die Funktion twentytwelve_entry_meta()  ändern.

twentytwelve: Größe des header-Bildes ändern

Wenn man mit der Größe des header-Bildes im Theme Twentytwelve nicht zufrieden ist, so kann man die Maße ändern.

Das folgende snippet habe ich im Internet gefunden.
(https://wordpress.org/support/topic/twenty-twelve-child-theme-change-header-height/)

<?php
function twentytwelvechild_custom_header_setup() {
$header_args = array( 'height' => 350, 'width' => 960 );
add_theme_support( 'custom-header', $header_args );
}
add_action( 'after_setup_theme', 'twentytwelvechild_custom_header_setup' );
?>

Man fügt es in die functions.php im child-Theme Ordner ein.
Ich habe hier die Höhe des Bildes von 250px auf 350px geändert.

das plugin „custom header images“ nutzen

  1. Dieses snippet ersetzt den Standard-header-Image-Teil in der header.php:
<div class="headerimage">
<?php if(function_exists('chi_display_header')) { chi_display_header(); } ?>
</div>

Da jedes Theme anders programmiert ist, kann ich hier keinen generellen Tipp  geben, was man löschen muss. Prinzipiell muss der php-Teil, der das header-bild normalerweise anzeigt, gelöscht werden, und statt dessen das oben genannte snippet eingefügt werden.

2. unter wp-content einen Ordner für die header Bilder anlegen

3. unter Einstellungen die absoluten Bildpfade eintragen
3a. Einstellungen speichern 🙂 (ganz unten

Dies funktioniert nur zusammen mit dem plugin custom header images, das installiert sein muss.

4. Möchte man das header-Bild zusätzlich responsive haben, so dass es sich für Mobiltelefone oder Tablets in der Größe anpasst, so fügt man in den Einstellungen des Plugins unter „benutzerdefinierte Ausgabe“ Folgendes ein:

<div onclick="if(this.getAttribute('data-link')!='') 
window.location.href=this.getAttribute('data-link')" 
data-link="[link]" class="chi_display_header" >
<img src="[image_url]" style="width:100%;" alt="" /></div>

Screenshot:

chi

Gefunden habe ich diesen Tipp im WordPress Support.

5. Dann habe ich noch in den Einstellungen des Plugins “custom header images” (Einstellungen / Header images) ganz unten unter Benutzerdefinierte Ausgabe Folgendes eingefügt, damit die header Bilder runde Ecken (?) haben.

<div class="chi_display_header">
<img src="[image_url]" style="max-width:100%; border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);" />
</div>