<?php if ( ! defined( 'ABSPATH' ) ) {
exit;
}
final class TVUE_Widget_Programmierung_01 {
const VERSION = '1.1.2';
public static function init() {
add_action( 'widgets_init', array( __CLASS__, 'register_widget_areas' ) );
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'enqueue_assets' ), 30 );
add_action( 'wp_footer', array( __CLASS__, 'render_widget_sources' ), 5 );
add_action( 'admin_menu', array( __CLASS__, 'add_admin_page' ) );
add_filter( 'body_class', array( __CLASS__, 'body_classes' ) );
}
public static function register_widget_areas() {
$common = array(
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget'  => '</section>',
'before_title'  => '<h2 class="widget-title">',
'after_title'   => '</h2>',
);
register_sidebar(
array_merge(
$common,
array(
'name'        => 'TVÜ – Oben Premium 300 px hoch',
'id'          => 'tvue-top-premium',
'description' => 'Premium-Werbefläche direkt unter Wetter/Hilfe/Weltzeit und vor den Artikeln. Auf großen Desktop-Bildschirmen mindestens 300 px hoch; auf Tablet und Smartphone ohne künstliche Mindesthöhe.',
)
)
);
register_sidebar(
array_merge(
$common,
array(
'name'        => 'TVÜ – Links 300 px',
'id'          => 'tvue-left-300',
'description' => 'Neue linke Seitenleiste. 300 px Nutzbreite auf großen Bildschirmen. Ideal für Veranstaltungskalender, Werbung und Zusatzinfos.',
)
)
);
register_sidebar(
array_merge(
$common,
array(
'name'        => 'TVÜ – Rechts 300 px (Zusatz)',
'id'          => 'tvue-right-300',
'description' => 'Zusätzliche Widgets oben in der rechten 300-px-Spalte. Bereits vorhandene rechte Theme-Widgets bleiben darunter erhalten.',
)
)
);
register_sidebar(
array_merge(
$common,
array(
'name'        => 'TVÜ – Unten 300 px hoch',
'id'          => 'tvue-bottom-300',
'description' => 'Vollbreiter Widgetbereich oberhalb des Footers. Auf großen Desktop-Bildschirmen mindestens 300 px hoch; auf Tablet und Smartphone ohne künstliche Mindesthöhe.',
)
)
);
}
public static function enqueue_assets() { if ( is_admin() || is_singular( 'post' ) ) {
return;
}
wp_enqueue_style(
'tvue-widget-programmierung-01',
plugin_dir_url(//tvueberregional.de/wp-content/plugins/tvue-widget-programmierung-01/assets/__FILE__) . 'assets/tvue-widget-layout.css',
array(),
self::VERSION
);
wp_enqueue_script(
'tvue-widget-programmierung-01',
plugin_dir_url(//tvueberregional.de/wp-content/plugins/tvue-widget-programmierung-01/assets/__FILE__) . 'assets/tvue-widget-layout.js',
array(),
self::VERSION,
true
);
wp_localize_script(
'tvue-widget-programmierung-01',
'TVUEWidgetLayout',
array(
'isSinglePost' => is_singular( 'post' ),
'desktopMin'   => 1200,
)
);
}
private static function capture_sidebar( $id ) {
if ( ! is_active_sidebar( $id ) ) {
return '';
}
ob_start();
dynamic_sidebar( $id );
return trim( ob_get_clean() );
}
public static function render_widget_sources() {
if ( is_admin() || is_singular( 'post' ) ) {
return;
}
$top    = self::capture_sidebar( 'tvue-top-premium' );
$left   = self::capture_sidebar( 'tvue-left-300' );
$right  = self::capture_sidebar( 'tvue-right-300' ); $bottom = '';
if (
'' === $top &&
'' === $left &&
'' === $right &&
'' === $bottom
) {
return;
}
?>
<div
id="tvue-widget-layout-sources"
class="tvue-widget-layout-sources"
aria-hidden="true"
>
<?php if ( '' !== $top ) : ?>
<div
id="tvue-source-top"
class="tvue-source-slot"
data-tvue-slot="top"
>
<?php
echo $top; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
<?php endif; ?>
<?php if ( '' !== $left ) : ?>
<div
id="tvue-source-left"
class="tvue-source-slot"
data-tvue-slot="left"
>
<?php
echo $left; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
<?php endif; ?>
<?php if ( '' !== $right ) : ?>
<div
id="tvue-source-right"
class="tvue-source-slot"
data-tvue-slot="right"
>
<?php
echo $right; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
<?php endif; ?>
<?php if ( '' !== $bottom ) : ?>
<div
id="tvue-source-bottom"
class="tvue-source-slot"
data-tvue-slot="bottom"
>
<?php
echo $bottom; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>
</div>
<?php endif; ?>
</div>
<?php
}
public static function body_classes( $classes ) {
if ( ! is_singular( 'post' ) ) {
$classes[] = 'tvue-widget-layout-plugin';
}
return $classes;
}
public static function add_admin_page() {
add_theme_page(
'TVÜ Widget-Layout',
'TVÜ Widget-Layout',
'edit_theme_options',
'tvue-widget-layout',
array( __CLASS__, 'render_admin_page' )
);
}
public static function render_admin_page() {
if ( ! current_user_can( 'edit_theme_options' ) ) {
return;
}
?>
<div class="wrap">
<h1>TVÜ Widget-Programmierung 01</h1>
<p>
<strong>Ziel:</strong>
Auf großen Desktop-Bildschirmen oben eine
Premium-Werbefläche mit mindestens 300 px Innenhöhe,
darunter links 300 px, Hauptinhalt flexibel und
rechts 300 px.
</p>
<p>
Auf Tablet und Smartphone wird für die Premium-Fläche
keine künstliche Mindesthöhe reserviert. Die Höhe
richtet sich dort ausschließlich nach dem tatsächlich
sichtbaren Inhalt.
</p>
<h2>So benutzt du es</h2>
<ol>
<li>
Gehe zu <strong>Design → Widgets</strong>.
</li>
<li>
Für die teuerste Werbeposition:
Widget in
<strong>TVÜ – Oben Premium 300 px hoch</strong>
ziehen.
Dieser Bereich erscheint unter
Wetter/Hilfe/Weltzeit und vor den Artikeln.
</li>
<li>
Für den Veranstaltungskalender:
Widget in
<strong>TVÜ – Links 300 px</strong>
ziehen.
</li>
<li>
Weitere rechte Widgets können in
<strong>TVÜ – Rechts 300 px (Zusatz)</strong>.
Bereits vorhandene rechte Theme-Widgets werden
nicht gelöscht.
</li>
<li>
Der untere Widgetbereich ist derzeit deaktiviert,
damit kein unnötiger Leerraum erzeugt wird.
</li>
</ol>
<p>
Auf Smartphones wird das Layout automatisch
einspaltig. Der Hauptinhalt bleibt zuerst sichtbar;
die Seitenleisten folgen darunter.
</p>
<p>
<strong>Stabilitätsregel seit Version 1.1.1:</strong>
Einzelartikel werden von diesem Plugin nicht
umgebaut. Dort bleibt das originale
Newsup-Artikel- und Sidebar-Layout unangetastet.
</p>
<p>
<strong>Mobil-Korrektur ab Version 1.1.2:</strong>
Die 300-px-Mindesthöhe der Premium-Werbefläche gilt
ausschließlich auf Desktop-Bildschirmen ab 1200 px.
</p>
</div>
<?php
}
}
TVUE_Widget_Programmierung_01::init();img {
max-width: 100%;
height: auto;
}
img[width][height] {
height: auto;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}