3. Widget Bereich definieren

achisto

Hallo,

ich soll einen dritten Widget Bereich erstellen. Dieser soll neben den Content rechts. Ich nutze eine Child Theme vom Twentythirteen Theme.

Nun zu meiner eigentlichen Frage:
Ich hab in der Sidebar.php diesen Bereich:

PHP

if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
    <div id="tertiary" class="sidebar-container" role="complementary">
        <div class="sidebar-inner">
            <div class="widget-area">
                <?php dynamic_sidebar( 'sidebar-2' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #tertiary -->

einmal kopiert und darunter nochmal eingefügt. Die einzelnen Zahlen bei der Kopie hab ich dann einfach mit einer
3 ersetzt. Muss ich in der functions.php auch noch etwas anpassen? Ich hab in dem FAQ Bereich gelesen das dort etwas noch angepasst werden muss. Wie bekomm ich aber eine 2. Sidebar auf die Rechte Seite und darein dann ein Widgetbereich in dem ich noch Sachen anlegen kann. Die Sidebar wird auch überhaupt nicht angezeigt. Ich bin noch sehr neu in Wordpress und kenn mich damit garnicht aus.

_____________

Und das ich nicht noch ein zweites Thema aufmachen muss direkt, noch eine zweite Frage. Unter den Header soll noch eine kleine Navigation mit den Punkten: Kontakt, Impressum und Krankmeldung. Doch wie sieht dazu der Code aus? Oder wie geh ich da vor?
Ich leg im Dashboard ein neues Menu an und lass das dann im Header als 2 Menu anzeigen, doch wie?

Adresse: Grundschule-ho-as.de/wordpress
Wordpress Version ist 3.6.1

Ich hoffe mir kann man nochmal helfen
Vielen Dank im Voraus
Mit freundlichen Grüßen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

pixselig

Hallo Achisto
Ja, du musst die Sidebar noch in der functions.php registrieren.
Siehe hierzu -> https://codex.wordpress.org/Function_Refer…egister_sidebar

Weiters beachte bitte beim kopieren des obigen Codes:
1.) die Klasse "tertiary" nur EINMAL vorkommen darf.
2.) am Anfang des Codes ein "<?php" fehlt.
3.) am Ende soetwas wie "<?php endif; ?> fehlt.

LG, pixselig

achisto

Hallo, Pixselig,

vielen Dank für die Antwort. Ich hab nur genau den Bereich oben in das Codefenster kopiert, den ich auch in der sidebar.php kopiert. Punkt 2 und 3 ist vorhanden und Punkt 1 ist klar. ID darf ja nur einmal vergeben werden.

Dann vielen Dank. Mit dieser Methode müsste es doch dann auch möglich sein noch ein weiteres Widget anzulegen um ein zweite Navigation für unter den Header anzulegen, oder?

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

Edit: Mit float: right kann ich dann die Sidebar auf die Rechte Seite legen? Oder gibt es dann Komplikationen mit den Einstellungen von der letzten Sidebar? Die hab ich ja auf die linke Seite gelegt.

Ich hab das nun so angepasst. Jetzt wird aber die komplette Seite nichtmehr angezeigt?

pixselig

Jens, ganz ehrlich -> jetzt wirds dann richtig kompliziert!

Also ganz Grob:

functions.php ab Zeile 225

Code

function twentythirteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );


    register_sidebar( array(
        'name'          => __( 'Secondary Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-2',
        'description'   => __( 'Appears on posts and pages in the sidebar.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
[COLOR=#ff0000]    register_sidebar( array(
        'name'          => __( 'Thirt Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-3',
        'description'   => __( 'Appears on posts and pages in the right sidebar.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );[/COLOR]
}
add_action( 'widgets_init', 'twentythirteen_widgets_init' );

Alles anzeigen

die roten Zeilen hinzufügen.

dann eine Datei im Themeverzeichnis erstellen welche du "sidebar-right.php" nennst und in welche du folgenden inhalt schreibst:

PHP

<?php
/**
 * The sidebar containing the thirt widget area, displays on posts and pages.
 *
 * If no active widgets in this sidebar, it will be hidden completely.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */


if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    <div id="sidebar-right" class="sidebar-container" role="complementary">
        <div class="sidebar-inner">
            <div class="widget-area">
                <?php dynamic_sidebar( 'sidebar-3' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #sidebar-right -->
<?php endif; ?>

Alles anzeigen

und dann fügst du in die index.php ab ca Zeile 35

PHP

</div><!-- #primary -->


<?php get_sidebar(); ?>
[COLOR=#ff0000]<?php get_sidebar( 'right' ); ?>[/COLOR]
<?php get_footer(); ?>

die rote Zeile ein.

Den obigen Aufruf der sidebar-right.php (<?php get_sidebar( 'right' ); ?>) musst du auch an der selben Stelle in sämtlichen anderen zuständigen php-Dateien hinzufügen (insbesondere in der page.php, der category.php, der single.php und der archive.php).

Positionieren kannst du die neue Sidebar dann in der style.css mit "#sidebar-right".

Viel Erfolg, pixselig

PS: ist nicht getestet.
PPS: das gesamte Vorgehen bezüglich deiner Layoutgestaltung ist nicht die Standardvorgehensweise ;)

achisto

Vielen Dank für den Code und dann werd ich mich ransetzten und schauen ob ich es so umsetzten.

Mit freundlichen Grüßen
Jens

achisto

Ich hab die einzelnen Codeabschnitte nun eingefügt und auch in die entsprechenden Bereiche in den anderen .php Dateien in dem genau dieser Konstrukt

PHP

<?php get_sidebar(); ?> 
<?php get_footer(); ?>

vorkam.
Danach sahen die unten gennanten Dateien dann so aus:

PHP

<?php get_sidebar(); ?>
<?php get_sidebar( 'right' ); ?>
<?php get_footer(); ?>

Bei mir waren es folgende Dateien die ich ergänzt habe:
archive.php, author.php, category.php, index.php, page.php, search.php, single.php, tag.php und taxonomy-post_format.php.

Da ich mir nich 100%ig sicher war, ob man auch in die anderen .php Dateien den Ausdruck hinzufügen muss, habe ich ihn weggelassen.
Dort war nämlich der o.g. Ausdruck nicht vorhanden.

Dazu hab ich noch die sidebar-right.php ins Themenverzeichnis angelegt.

Zu der Frage:

1) Wurde noch eine Datei vergessen? Bzw. müssen auch in den anderen Dateien in denen dieser Ausdruck nicht vorkommt mit diesem Code
(" [COLOR=#ff0000]<?php get_sidebar( 'right' ); ?> [/COLOR][COLOR=#000000]")[/COLOR] ergänzt werden?

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

pixselig

Sollte passen. Beachte aber, dass der Widget Bereich nur angezeigt wird, wenn du zumindest ein Widget in ihm aktiviert hast.

achisto

Funktioniert aber nicht. Ich hab den Inhalt wieder aus dem Verzeichnis gelöscht, damit die Seite wieder angezeigt wird.
Wenn die Dateien im Verzeichnis enthalten sind, funktioniert das Theme nicht und die komplette Seite wird weiß angezeigt.

Gibt es dafür eine Lösung? Aus diesem wollte ich gerne wissen ob ich den noch irgendwo einen Fehler gemacht habe?

Vielen Dank
Mit freundlichen Grüßen
Jens

achisto

Kann es daran liegen, dass ich die Sidebar die position geändert habe? Im ersten Thema " Hauptnavigation untereinander | Child Theme von Twentythirteen " hatte ich ja die Anleitung befolgt wie ich die Sidebar von Rechts nach Links bekommen kann? Liegt es eventuell daran oder hat das damit nichts zutun?

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

Edit: Die bearbeiten .php Dateien müssen in den Child-Theme Ordner geladen werden? Oder in den Parent Theme Ordner Twenty Thirteen?

pixselig

Ich habe es jetzt selber nach meiner Anleitung gemacht ;) und es funktioniert einwandfrei (positionieren muss man halt noch da sonst die widgetbereiche übereinander liegen)!
Ich habe aber die Änderungen im Parent- bzw OriginalTheme vorgenommen. Ich kenne mich jetzt nicht so mit ChildThemes aus, da ich mir selber die Themes bastle und daher keine ChildThemes brauche.
Aber was ich weiss (oder zumindest glaube):
-du kannst die template-dateien (page.php etc.) in das Child-Theme kopieren und dann wie oben erwähnt abändern. Die "neue" page.php wird dann der des parent-themes bevorzugt bzw. ersetzt die. -> so bleibt das parent Theme ubdatebar. Änderungen in den Parent-Templatedateien werden allerdings nicht übernomme!! -> da aber werder die header.php noch die footer.php von den Änderungen betroffen sind sollte das nicht so tragisch sein.
-spezialfall "functions.php": diese Datei aus dem Child-Theme "überschreibt" NICHT die functions.php des Parent-Themes sonder ERGÄNTZ diese nur. Daraus folgt, dass du nicht die ganze functions.php in das Child-Theme kopierst sondern nur die Ergänzungen in eine NEU angelegte functions.php einträgst. also dann in etwa so:
functions.php des child-themes:

PHP

<?php
function twentythirteen_widgets_init() {
        register_sidebar( array(
        'name'          => __( 'Thirt Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-3',
        'description'   => __( 'Appears on posts and pages in the right sidebar.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'twentythirteen_widgets_init' );
?>

Alles anzeigen

LG, pixselig

achisto

Funktioniert. Ich hab die original Dateien aus dem Parent Theme überschrieben. Vorher ein Backup gemacht um sicherzustellen das nichts verloren geht.

Vorher hatte ich noch das mit der functions.php ausprobiert. Hat aber leider nichts an der Sache geändert. Vielen Dank.

Was kann ich den dagegen tun das mein Content Bereich unter die Nav rutscht wenn das Browserfenster verkleinert wird? Liegt das an der fixen Positionierung der Navigation?

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

pixselig

Zitat von achisto

Was kann ich den dagegen tun das mein Content Bereich unter die Nav rutscht wenn das Browserfenster verkleinert wird? Liegt das an der fixen Positionierung der Navigation?

kurz: ja!
LG

achisto

Dacht ich mir. Ich wollte nur auf Nummer sicher gehen und nicht später zu meinem Chef was falsches sagen.

Bearbeiten lässt sich die Sidebar aber über "#sidebar-right" nicht. Zumindestens klappt keine Positionierung. Liegt das daran, dass ich die linke Sidebar von rechts nach links verschoben habe?

Das ist der Code für den Positionwechsel der Sidebar.

CSS

.site-main .widget-area {
                float: left;
                position: fixed;
                left: 0% !important;
                top: 31% !important;
            }
            
            .widget {
                background: none !important;
                background-color: none !important;
            }


            @media (min-width: 1000px){
                .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
                padding: 0 60px 0 340px;
                }
            }


            #main.site-main:before, 
            #main.site-main:after {
                content: " "; 
                display: table;
            }
            #main.site-main:after {
                clear: both;
            }
            #main.site-main {
                *zoom: 1;
            }
            
            .widget ul.menu li ul {
                visibility:hidden;
            }


            .widget ul.menu li:hover ul {
                visibility:visible;
            }

Alles anzeigen

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

pixselig

Das liegt daran, dass du die positionierung der linken sidebar nicht in selbiger sondern innerhal dieser hier

CSS

.site-main .widget-area {
    float: left;
    left: 0 !important;
    position: fixed;
    top: 31% !important;




}

tja, am einfachsten wird sein, du änderst nochmals die sidebar-right.php

PHP

<?php
/**
 * The sidebar containing the thirt widget area, displays on posts and pages.
 *
 * If no active widgets in this sidebar, it will be hidden completely.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */


if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    <div id="sidebar-right" class="sidebar-container[COLOR=#ff0000]-right[/COLOR]" role="complementary">
        <div class="sidebar-inner[COLOR=#ff0000]-right[/COLOR]">
            <div class="widget-area[COLOR=#ff0000]-right[/COLOR]">
                <?php dynamic_sidebar( 'sidebar-3' ); ?>
            </div><!-- .widget-area -->
        </div><!-- .sidebar-inner -->
    </div><!-- #sidebar-right -->
<?php endif; ?>

Alles anzeigen

rotes ergänzen -> daurch hast du jetzt andere Klassen für den rechten widget bereich.

Nochetwas: float und position:fixed kann man nicht gemeinsam für ein Element definieren (eigentlich gar kein position mit float).

achisto

Zitat

Nochetwas: float und position:fixed kann man nicht gemeinsam für ein Element definieren (eigentlich gar kein position mit float).

Vielen Dank das wusste ich nicht.

Gebe es den eine Möglichkeit das der Content nichtmehr unter die Nav rutscht bei Browserverkleinerung? Hab es ausprobiert in dem ich der Nav ne relative Positionierung gegeben habe. Danach rutscht aber die komplette Sidebar bzw. Nav unter den Fließtext und das ist ja auch nicht die Lösung. Was kann man dagegen tun? Bzw. was muss ich ändern?

Vielen Dank
Mit freundlichen Grüßen
Jens

pixselig

Die responsive Eigenschaft des Themes ist leider ziemlich zerschossen. daher schlage ich vor, dass du der gesammten Seite (#page) eine fixe breite gibst und die einzelnen boxen (header, footer, main - und innerhalb von main nochmals primary, tertiary und sidebar-right) NEU an ihr ausrichtest! Das ist die einfachste und sauberste Lösung - allerdings ohne responsive Eigenschaften.
Ansonsten musst du dich selber spielen, sorry, aber das geht mir jetzt dann zu weit.
LG, pixselig

mxmanuel

Hier noch eine Antwort zu deinem Navigations-Problem:

Mehrere Navigationen registrieren:

1. Functions.php:

Eintrag der ersten Navigation ab register_nav_menus( array( kopieren und hinter ));
wieder einfügen. Dabei einen neuen Namen vergeben.

Beispiel:
* This theme uses wp_nav_menu() in one location.
*/
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'test_theme' ),
) );
/** Hier kommt das Header Menue */
register_nav_menus( array(
'secondary' => __( 'Header Menu', 'test_theme' ),
) );

2. Dort wo das neue Menue ausgegeben werden soll folgendes eintragen:
<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>

Das 2. kannst du dann natürlich in ein div packen, damit es dort ausgegeben wird, wo und wie du es haben willst.

Ich hoffe, das hilft

achisto

Vielen Dank euch beiden für die Hilfe. Ich werd mich jetzt mal dran versuchen.

achisto

Hallo,

ich hab nochmal ein paar kleinere Fragen:

1). Auf dieser Seite (KLICK) der untere Abstand. Wie kann ich den dort unten rausbekommen? Alles insgesamt etwas zusammenstauchen? Keine meine Versuche wollen so recht funktionieren.

2). Wie bekommt man die rechte sidebar auf jeder Seite auf die gleiche position? Auf die gleiche Höhe? Sie soll mit der Navigation und dem Content Text bündig auf jeder Seite angezeigt werden?

3.) Seit heute wird mein Footer nichtmehr komplett angezeigt wenn das Browserfenster verkleinert wird. Woran kann das liegen? Was kann ich dagegen tun?

Ich hoffe ihr könnt mir nochmal helfen. Ich verzweifle sonst noch.

Vielen Dank im Voraus
Mit freundlichen Grüßen
Jens

Willkommen! Melden Sie sich an oder registrieren Sie sich.

3. Widget Bereich definieren

Jetzt mitmachen!