Inhalt des Registerkartens mit verschiedenen Registerkarten -Hintergrundbildern

Question

Ich suche derzeit nach einer Möglichkeit, das Bild zu replizieren, das ich unten habe. Ich bin auf viele Registerkarten -Content -Plugins und Codeausschnitte gestoßen, aber ich kann nicht herausfinden, wie man jeder Registerkarte verschiedene Hintergrundbilder hinzufügt.

Answer 1

Vorbereiten

Sie müssen einige verwenden JQuery und JQuery UI Auf Ihren Registerkarten.

Laden Sie es mit wp_enqueue_script - Kodex, Wie man.

Die Suche

In jedem Fall: Google für "JQuery -Registerkarten".

Markieren

Das Aufschlag wird diesem in der Nähe aussehen.

<!-- These are the tabs -->
<ul class="wpse-tabs">
    <li>
        <a href="#your-target-div-A" title="Your target description A">
            <span class="wpse-tabs-icon smilie-icon"></span>
            A: Some descriptive text
        </a>
    </li>
    <li>
        <a href="#your-target-div-B" title="Your target description B">
            <span class="wpse-tabs-icon stats-icon"></span>
            B: Some descriptive text
        </a>
    </li>
</ul>

<!-- This is your content with wrapper -->
<div class="tab-target-wrapper">
    <div id="your-target-div-A">Your content A</div>
    <div id="your-target-div-B">Your content B</div>
</div>

Der Style

<style>
/* Assumin you're using an image sprite as background. 
In case you don't know what that is, ask google */
.wpse-tabs-icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url('iconsprite.png') no-repeat;
}
.smilie-icon {
    background-position: 0px 0px;
}
.stats-icon {
    background-position: 20px 0px;
}
</style>