Header Icons

    Inhaltsangabe
  1. Ergebnis
    1. Backend
    2. Frontend

Vor einiger Zeit habe ich den Header die Icons eingeführt, welche auf FontAwesome Strong laufen. Das schränkt mich extrem ein, da ich manchmal über bestimmte Webseiten oder Produkte schreibe, wo ich keine passenden Icons zu finde. Ich möchte das ändern und eine Auswahl hinzufügen, wo ich auswählen können soll, welche Schriftart ausgewählt werden soll. Vielleicht werde ich das sogar so machen, dass man seinen eigenen SVG Code einfügen kann. Um das zu realisieren, werde ich mein Code, den ich bereits geschrieben habe erweitern:

Hier mein Code Schnipsel:

Ergebnis

Wenn ihr mein Beitrag von letztes Mal lest, ist dieser Code eigentlich selbsterklärend.

Backend

<?php
$meta_boxes = array(
	array(
		'slug'		=> 'post_icon',
		'title'		=> 'Post Icon',
		'function' 	=> 'post_icon_meta',
		'post_types'=> array('post')

	),
	array(
		'slug'		=> 'icon_font',
		'title'		=> 'Icon Font',
		'function' 	=> false,
		'post_types'=> array('post')

	),
	array(
		'slug'		=> 'subline',
		'title'		=> 'Subline',
		'function' 	=> 'subline_meta',
		'post_types'=> array('post')

	)
);

function custom_meta_boxes(){
	global $meta_boxes;
	foreach ($meta_boxes as $meta_box) {
		foreach ($meta_box['post_types'] as $post_type_to_show) {
			if($meta_box['function']) add_meta_box(
				$meta_box['slug'],
				$meta_box['title'],
				$meta_box['function'],
				$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);
	$icon_font = get_post_meta($post->ID, 'icon_font', true);
    ?>
	<div class="components-panel__row">
		<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 : '' ?>">
	</div>
	<div class="components-panel__row">
		<label for="icon_font">Wähle ein <a href="https://fontawesome.com/icons?d=gallery" target="_blank">Fontawesome Schnitt</a> aus.</label><br>
		<select class="" name="icon_font" id="icon_font">
			<option value="fas" <?= ($icon_font === 'fas')? 'selected' : '' ?>>Solid</option>
			<option value="far" <?= ($icon_font === 'far')? 'selected' : '' ?>>Regular</option>
			<option value="fal" <?= ($icon_font === 'fal')? 'selected' : '' ?>>Light</option>
			<option value="fab" <?= ($icon_font === 'fab')? 'selected' : '' ?>>Brand</option>
		</select>
	</div>
    <?php
}

function subline_meta($post){
	$subline = get_post_meta($post->ID, 'subline', true);
    ?>
    <label for="subline">Subline (H2) eintragen</label><br>
    <input type="text" name="subline" id="subline" value="<?= ($subline)? $subline : '' ?>">
    <?php
}

function save_postdata($post_id){
	global $meta_boxes;
	foreach ($meta_boxes as $meta_box) {
		if (array_key_exists($meta_box['slug'], $_POST)) {
			update_post_meta(
				$post_id,
				$meta_box['slug'],
				$_POST[$meta_box['slug']]
			);
		}
	}
}
add_action('save_post', 'save_postdata');

Frontend

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

Ich teste das mal einfach mit dem Playstation-Logo…

Themen

Fonts Icons Technik WordPress

Beitrag teilen

WhatsAppen

Folgen Sie uns