CSS3: Padding bei mehrzeiligen Inline-Elementen

Das Padding links oder rechts bei Inline-Elementen wie <span> funktioniert zwar wunderbar, aber nur so lange wie diese Inline-Elemente nicht über eine Zeile hinausgehen. Bei mehrzeiligen Elementen erscheint der Abstand in der ersten Zeile links und in der letzten Zeile rechts.

 

html-Code:

1
2
3
4
5
<div class="example-container">
    <p>
        <span class="example-highlight">Hervogehobener, mehrzeiliger Text</span>
    </p>
</div>
<div class="example-container">
	<p>
		<span class="example-highlight">Hervogehobener, mehrzeiliger Text</span>
	</p>
</div>

 

CSS:

1
2
3
4
5
6
7
8
.example-container {
    width: 200px;
}
.example-highlight {
    background: #ff0000;
    color: #fff;
    padding: 3px 10px;  
}
.example-container {
	width: 200px;
}
.example-highlight {
	background: #ff0000;
	color: #fff;
	padding: 3px 10px;	
}

 

Heraus kommt folgendes:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

 

Das ist kein Fehler, sondern ist absolut standardkonform. Wenn man diesen Abstand aber auch in Zeile 2 braucht, aber trotzdem – aus irgendwelchen Gründen – ein Inline-Element verwenden muss, gibt’s mittels CSS3 einen einfachen Trick: der doppelte box-shadow.

 

CSS:

1
2
3
4
5
6
7
.example-hightlight {
    background:#ff0000;color:#fff;
    padding: 3px 0;
    box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
    -moz-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
    -webkit-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
}
.example-hightlight {
	background:#ff0000;color:#fff;
	padding: 3px 0;
	box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
	-moz-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
	-webkit-box-shadow:10px 0 0 #ff0000,-10px 0 0 #ff0000;
}

 

Ergebnis:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt

WordPress: an Artikel angehängtes pdf anzeigen

Wenn man ein an einen Artikel angehöngtes pdf-Dokument in WordPress anzeigen will, genügt eine kleine Abänderung des Codes zum Anzeigen von Artikelbildern.

In die funktions.php kommt:

1
2
3
4
5
6
7
8
9
10
11
12
13
// get the first PDF attached to the current post
function my_theme_get_post_pdf() {
    global $post;
 
    $attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'application/pdf', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
 
    if ($attachments) { 
        $attachment = array_shift($attachments);
        return wp_get_attachment_url($attachment->ID);
    }
 
    return false;
}
// get the first PDF attached to the current post
function my_theme_get_post_pdf() {
	global $post;

	$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'application/pdf', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

	if ($attachments) { 
		$attachment = array_shift($attachments);
		return wp_get_attachment_url($attachment->ID);
	}

	return false;
}

Und im Theme an die entsprechende Stelle:

1
$pdf = my_theme_get_post_pdf();
$pdf = my_theme_get_post_pdf();

WordPress: erstes Artikelbild anzeigen

Um nur das erste Bild, der einem Artikel zugeordneten Bilder anzuzeigen, eigentlich sich dieser Code:

In der functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
function my_theme_get_post_image($size = 'thumbnail') {
    global $post;
 
    $photos = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
    
    if ($photos) {
        $photo = array_shift($photos);
        return wp_get_attachment_image($photo->ID, $size);
    }
    
    return false;
}
function my_theme_get_post_image($size = 'thumbnail') {
	global $post;

	$photos = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
	
	if ($photos) {
		$photo = array_shift($photos);
		return wp_get_attachment_image($photo->ID, $size);
	}
	
	return false;
}

Aufrufen lässt sich das Bild dann im Theme mit:

1
$photo = my_theme_get_post_image();
$photo = my_theme_get_post_image();

Credits an John Ford für diesen Code.

WordPress: Selbst-Ping bei internen Links vermeiden

Wer den WordPress Update-Service nutzt um anderen Diensten bescheid zu geben, wenn ein neuer Artikel veröffentlicht wurde, kennt das Problem: sobald im Artikel ein interner Link vorhanden ist, pingt man sich selbst. Äußerst nervige Angelegenheit. Lässt sich aber schnell beheben.

Einfach in der funktions.php des aktiven Templates folgendens einfügen:

1
2
3
4
5
6
7
8
function no_self_ping (&$links) {
$home = get_option( 'home' );
foreach ( $links as $l => $link )
    if ( 0 === strpos( $link, $home ) )
        unset($links[$l]);
}
 
add_action( 'pre_ping', 'no_self_ping' );
function no_self_ping (&$links) {
$home = get_option( 'home' );
foreach ( $links as $l => $link )
    if ( 0 === strpos( $link, $home ) )
        unset($links[$l]);
}
 
add_action( 'pre_ping', 'no_self_ping' );