it-swarm.com.de

Hinzufügen von <select> mit Javascript zur Admin-Leiste. Funktioniert in Chrome/Safari, nicht in Firefox

Ich versuche, der WordPress-Administrationsleiste einen neuen Menüeintrag hinzuzufügen. Der Untermenüpunkt enthält ein Dropdown-Menü zum Wechseln der Themen. In Firefox mit href => false hat es <a href=""> generiert, und als ich auf "Select" geklickt habe, hat es die Seite neu geladen. Ich habe es in <a href="#"> geändert. Das hat das Neuladen der Seite beim Klicken auf die Auswahl behoben ... aber das Javascript funktioniert nicht.

Der Code selbst funktioniert in Chrome und Safari auf dem Mac einwandfrei. Ich habe IE noch keine Browser unter Windows getestet. In Firefox auf Mac macht es nichts.

Hier ist der vom Plugin generierte Code:

<li id="wp-admin-bar-switch_themes" class="menupop">
    <a href="#"><span>Switch Themes</span></a>
    <ul>
            <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">
                    <a href="#">
                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>
                    </a>
            </li>
    </ul>
</li>

Nichts Besonderes im Code, um die Elemente der Administrationsleiste zu generieren ...

$wp_admin_bar->add_menu( array( 'id' => 'switch_themes', 'title' => __( 'Switch Themes', 'textdomain' ), 'href' => '#' ) );
$wp_admin_bar->add_menu( array( 'parent' => 'switch_themes', 'title' => $theme_switcher->theme_switcher_markup('dropdown'), 'href' => '#' ) );
2
Ryan Duff

Offensichtlich können Sie ein Select-Tag nicht in einen A-Anker einfügen. Was passiert, hängt mit dem Sprudeln von Ereignissen zusammen: Firefox berücksichtigt den Ein-Anker-Klick und nicht das Auswahlsteuerelement.

Ändere dein HTML in:

 <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">

                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>

            </li>

und es sollte plattformübergreifend funktionieren.

2
pixeline

Wenn Sie dem Menüelement außerhalb des Tags <a> Inhalt hinzufügen möchten, können Sie dies im Argument ['meta']['html'] hinzufügen. Ihr Code würde also so aussehen:

$wp_admin_bar->add_menu( array(
    'parent' => 'switch_themes',
    'meta' => array(
        'html' => $theme_switcher->theme_switcher_markup( 'dropdown' ),
    ),
    'href' => '#',
    'title' => ' ', // An empty title will not be accepted
    'id' => 'wpse17434_child', // If the title is empty, you need to specify the ID yourself
) );

Dadurch wird ein hässlicher leerer <a>-Block über Ihrem Dropdown-Menü generiert. Sie können diesen jedoch mit dem richtigen Stil ausblenden.

Haben Sie darüber nachgedacht, kein Dropdown-Menü, sondern nur ein Untermenü zum Auflisten der verschiedenen Themen zu verwenden? Dies entspricht eher dem aktuellen Menüleistenstil.

2
Jan Fabry

Da ich die hinzugefügten Tags nicht bearbeiten konnte, aber die darin enthaltenen bearbeiten konnte, fügte ich ein schließendes Tag hinzu und öffnete am Ende des Einfügens erneut ein neues Tag. Dann habe ich einfach CSS verwendet, um die leere Zeile auszublenden, die sie um meinen Inhalt hinzugefügt haben. Setzen Sie außerdem die href für beide Tags auf # ....

Das Firefox-Problem, das das einzige Problem war, das pingelig genug war, wurde behoben. Sogar der W3-Prüfer sagte, der Code sei in Ordnung.

Hier ist der resultierende Code:

<li id="wp-admin-bar-switch_themes" class="menupop">
<a href="#"><span>Switch Themes</span></a>
    <ul>                                
        <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=" themeswitchermenu"> 
            <a href="#"></a>
            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none; margin: 10px;"> 
                <option>Blah</option>
            </select><a href="#"></a> 
        </li>
    </ul>
</li>
0
Ryan Duff