Bisher bin ich immer so vorgegangen, dass ich den Artikel ohne Video fertig geschrieben hatte, dann in die HTML-Ansicht des Editors gewechselt bin und hier den Code der YouTube-Seite eingefügt habe. Danach speichern und fertig – der Code sieht dann so aus:


<object width="500" height="315">
<param name="movie" value="http://www.youtube-nocookie.com/v/ldL0ZKqVLYM&hl=de_DE&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/ldL0ZKqVLYM&hl=de_DE&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="315"></embed>
</object>

So hat es immer funktioniert – in der normalen Ansicht und auf dem iPhone. Bis gestern. Ich habe nun den Code von einem alten und einem neuen Beitrag mit Video verglichen: identisch. Auch ein untereinanderkopieren der zwei Videos zeigt, dass eines dargestellt wird und das andere nicht – hängt das mit den HQ-Videos zusammen?

Na ja, wie dem auch sei, die einfache Lösung lautet: Plugin. Und zwar das Plugin “Smart Youtube” von dieser Seite. Statt dem kompletten Quelltext muss nun nur noch eine einzige Zeile eingefügt werden: h t t p v : / / www.youtube.com/watch?v=ldL0ZKqVLYM (Man achte auf das httpV! Die Leerzeichen sind deshalb drin, weil das Plugin schon aktiviert ist und er so denken würde, er müsse auch hier ein Video einbetten.).

Viele Dinge funktionieren noch nicht, das kommt aber!

Hier kostenlos über zu haben!

li {...
display:block;
height: 14px;
line-height: 14px;
...}

Ich hab das Problem jetzt (hoffentlich) so gelöst, dass ein neues DIV den eigentlichen Wrapper nochmal umschließt – ein neuer Wrapper für den Wrapper quasi. Nun habe ich links und rechts jeweils 2x das Border-Attribut und 2x das Background-Color-Attribut, ich kann also 4 verschiedenen, aneinandergrenzenden Flächen eine Farbe geben und somit Schatten erzeugen. Zusätzlich habe ich noch den “normalen” Body, dem ich auch noch eine Farbe zuweisen kann.

Hoffentlich war es das.

Die Funktion ist schnell eingebaut und noch schneller erklärt. Im Prinzip gibt man dem Theme im HEAD der Header.php das Standard-CSS-File mit (in meinem Fall so ausgelegt, dass es mit 1024×768 gut aussieht und mit 800×600 auch noch einigermaßen passt).

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />


Im BODY der Header.php verweist man nun auf die Javascript-Datei:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/multidesign.js"></script>

Der Inhalt der – gleich wie von CT benannten – Multidesign.js sieht folgendermaßen aus:

var stylesheet, breite;
if (window.innerWidth) {breite = window.innerWidth;} else
{breite = document.body.clientWidth;}
if (breite>=1200) {stylesheet = 'http://pfadzumstylesheet/css1280.css';}
document.writeln('<style type="text/css"><!-- @import url(' + stylesheet + '); --> </style>');

Nun kann nach Belieben designed werden. Hat z.B. ein Container bei der 1024er-(Standard-)CSS eine Breite von 770 Pixeln, kann er beim 1280er-CSS locker 1200 Pixel breit werden. Außerdem bietet sich die Möglichkeit einer zweiten Sidebar an, die in einem zusätzlichen DIV steht, dem bei der Standardauflösung die Größe 1×1 px und die Eigenschaft “visibility: hidden” zugewiesen wird.

Aber immer daran denken: Die Standard-CSS lädt er trotzdem immer. Ich hab ewig gesucht, wo meine Sidebar hin ist, bis ich auf die Idee kam, dass ich ihr natürlich im 1280er-CSS die Eigenschaft “visibility: visible” geben muss.

Mein Beispiel gibt es hier! (Allerdings ständig in Arbeit – kann also sein, dass es schon wieder nicht geht…)

Und? Die seitlichen DIVs, die ich als Rahmen missbrauche (und was im IE7 und FF auch spitze funktioniert), werden nur ein paar Pixel hoch angezeigt… aber wieso überhaupt “ein paar Pixel hoch” und nicht “ein Pixel hoch” (wie hoch die Grafik nämlich ist)? Die Suche in Google brachte mich bisher nicht weiter… Morgen ist ein neuer Tag, da läuft’s vielleicht besser.

Ich will doch endlich das Design fertig haben, meinen Internationalen Blog starten und von den Werbeeinnahmen leben.

404.php
archive.php
archives.php
attachment.php
comments-popup.php
comments.php
footer.php
functions.php
header.php
index.php
links.php
page.php
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

Am Anfang interessieren uns aber nur

footer.php
header.php
index.php
sidebar.php
style.css

Wir nehmen also die vorhandene Datei und zerstückeln diese.

In die Datei index.php kopieren wir diesen Quelltext:

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="postrahmen">
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a xhref="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><small><?php the_time('j. F Y') ?></small>
<div><?php the_content('Den ganzen Beitrag lesen »'); ?></div>
<p class="postfooter">Kategorie <?php the_category(', ') ?> <strong>|</strong> <?php comments_popup_link('0 Kommentare »', '1 Kommentar »', '% Kommentare »'); ?> <?php edit_post_link('Bearbeiten','<strong>|</strong> ',''); ?></p>
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="links"><?php next_posts_link('« Vorherige Einträge') ?></div>
<div class="rechts"><?php previous_posts_link('Nächste Einträge »') ?></div>
</div>
<?php else : ?>
<h2>Nicht gefunden</h2>
<p class="center">Sorry, aber Du suchst gerade nach etwas, was hier nicht ist.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

Die zwei fett geschriebenen Verweise zeigen, dass innerhalb dieser index.php der Header und der Footer geladen werden. Damit dies auch geschieht, müssen sie existent und sinnvollerweise auch gefüllt sein.

Header.php

<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" xhref="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" xhref="<?php

bloginfo('rss2_url'); ?>" />
<link rel="pingback" xhref="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>

<div id="wrapper">
<div id="randlinks"></div>
<div id="randrechts"></div>
<div id="header">
<div id="logo"><h1><a xhref="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1></div>
<div>
<div id="mininavi">

<a xhref="<?php echo get_settings('home'); ?>/">

<img xsrc="<?php bloginfo('template_directory'); ?>/images/mini_homie.gif" alt="Home"/></a>

<?php bloginfo('description'); ?>
</div>
<div id="search"></div>
<div id="ads"></div>
</div>
</div>
<div id="body">
<?php get_sidebar(); ?>