Ordnung schaffen

Wie man mit einfachen Tricks die Seite aufräumen kann

Ich habe gestern meinen ersten Blogbeitrag geschrieben und veröffentlicht, obwohl die Seite noch total kaputt aussieht. Ich hänge mal ein Screenshot an, damit ihr sehen könnt, von was für einem Ausmaß wir hier reden 🙂

Wenn ein Nicht-Programmierer so etwas sieht, bekommt er sofort bammel, weil es so durcheinander aussieht. Eigentlich ist das nur ein php-Fehler und ein wenig css…. Wenn man es schnell machen möchte. Ich möchte es jedoch am Ende gut aussehen lassen, weshalb ich erst einmal das grobe beseitigen werde und am Ende mich den Feinheiten zuwenden werde. Es gelten für alle Web-Projekte folgende Abfolgen:

  • Fehler beheben! Alle sichtbaren Fehlermeldungen sowie fehlerhafte HTML-Darstellungen sollten behoben werden.
  • Das grobe zuerst! Ordnung schaffen und grobe css Eigenschaften vornehmen, sodass man erst einmal einen Überblick hat.
  • Feinheiten und Extras. Wenn man das alles gemacht hat und dann weiterhin Luft nach oben hat, kann man sich den Feinheiten wie Fine-tuning und JavaScript widmen.

Fangen wir also ganz normal mit dem Header an. Das war ursprünglich dafür gedacht, einen FontAwesome Icon anzeigen zu lassen. Weil der Part jedoch nicht drin steht, welches das Icon vervollständigen soll, wird einfach nur ein &#x; angezeigt. Also erkundigen wir uns, ob man im Dokument-Bereich von WordPress schnell und einfach eigene Felder hinzufügen können.

Ich habe jetzt aufs schnelle nicht herausgefunden, wie man ohne Schwierigkeiten ein weiteres Feld in die Sidebar hinzufügen kann, daher habe ich eine einfache Metabox programmiert. Für diejenigen unter euch, die noch nie eine Metabox programmiert haben, es wird un 3 Bereiche eingeteilt.

  • Deklaration der Metabox selber (add_meta_boxes)
  • Programmierung der Anzeige (custom_func)
  • Programmierung der Speicherung (save_post)

Die Codes sind eigentlich relativ selbsterklärend:

<?php
function custom_meta_boxes(){
    $post_types_to_show = ['post'];
    foreach ($post_types_to_show as $post_type_to_show) {
        add_meta_box(
            'post_icon',
            'Post Icon',
            'post_icon_meta',
            $post_type_to_show
        );
    }
}
add_action('add_meta_boxes', 'custom_meta_boxes');


function post_icon_meta($post){
	$post_icon = get_post_meta($post->ID, 'post_icon', true);
    ?>
    <label for="post_icon">Wähle ein <a href="https://fontawesome.com/icons?d=gallery" target="_blank">Icon</a> aus oder gib einfach eine Zahl ein</label><br>
    <input type="text" name="post_icon" id="post_icon" value="<?= ($post_icon)? $post_icon : '' ?>">
    <?php
}

function save_postdata($post_id){
    if (array_key_exists('post_icon', $_POST)) {
        update_post_meta(
            $post_id,
            'post_icon',
            $_POST['post_icon']
        );
    }
}
add_action('save_post', 'save_postdata');

Sobald das programmiert wurde wird unten folgendes angezeigt:

Wenn ich jetzt hier z.B. mein Icon hinzufüge und im Frontend an die richtige Stelle folgenden Befehl reinschreibe:

<?php if ($post_icon = get_post_meta($post->ID, 'post_icon', true)): ?>
				<div class="title-icon-container">
					<div class="title-icon icon i-light"><i class="fa"><?= $post_icon ?></i></div>
				</div>
			<?php endif; ?>

Wird das wie folgt angezeigt

Sein Problem ist einfach nur, dass ich eine foreach schleife auf eine leere Variable angewandt habe. Deswegen verschachtele ich die Schleife einfach in ein !empty($variable) und der Fehler ist behoben.

Jetzt vergebe ich dem Content noch eine Maximalbreite, welches ich später natürlich besser ergänzen werde und Voila! Die Seite sieht schon viel aufgeräumter aus! Hier einmal ein Vorher-Nachher Vergleich:

Themen

css HTML Technik WordPress

Beitrag teilen

WhatsAppen

Folgen Sie uns