Styla dina Plugins på rätt sätt
formatPlugin

Det finns snyggare och fulare plugins där ute. Det gäller inte bara att kunna programmera när man gör ett eget plugin, utan även kunna styla det snyggt.

WordPress har en mängd stylesheets de använder för att få saker och ting att se ut som de ska, utnyttja dessa genom att formatera din kod på rätt sätt och få dina egna element att se ut precis som de borde i WordPress.

Oneextrapixel skrev ett riktigt bra inlägg om detta, så jag tänkte att jag skriver mitt eget på svenska och rättar till några saker jag tyckte saknades på hans inlägg.

Det första du borde göra är att sluta in hela din kod i en wrap-tag. Det är en vanlig <div>-tag med klassnamnet wrap:

1
2
3
<div class="wrap">
    ...
</div>

Riktiga Knappar och Rubriker

Rubrukerna får du automatiskt genom de vanliga rubrik-taggarna. Använd dig av <h2> endast som din huvudrubrik, och <h3> och <h4> till de andra rubrikerna.

Knapparna får du genom att sätta in klassen button-primary eller button-secondary i <input>-taggen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Huvud Rubrik -->
<h2>Mitt Plugin</h2>
 
<!-- Under Rubrik -->
<h3>Kontakt Formulär</h3>
 
<!-- Under Under Rubrik -->
<h4>Under Inställingar</h4>
 
<!-- Primär Knapp -->
<input class="button-primary" type="submit" name="Save" value="<?php _e('Save Changes') ?>" id="submitbutton" />
 
<!-- Sekundär Knapp -->
<input type="submit" value="<?php _e('Search'); ?>" class="button-secondary" />
 
<!-- Sekundär Knapp i <a> -->
<a class="button-secondary" href="#" title="Länk knapp">Länk knapp</a>

Plugin Ikon vid rubriken

Högst upp till vänster om din huvudrubrik kan du ha en ikon i storleken 32 px. Det finns 11 st standard ikoner som du kan använda dig av med den enkel php-funktion

<?php screen_icon($screen); ?>

Variabeln $screen bestämmer vilken ikon du vill ha.

Om du vill ha din egen ikon med en länk till din hemsida så kan du göra det också, genom att använda dig av klassen icon32 så kan du få den att formateras på rätt sätt.

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    <!-- Sätt adressen till din ikon som bakgrund, no-repeat-->
    #min_ikon{
        background: url(http://www.mitt_domän.se/extras/ikon-32x32.png) no-repeat;
    }
</style>
 
<!-- Länken du vill att ikonen ska peka till-->
<a href="http://mittdomän.se">
    <!-- Det är den här div:en som blir ikonen, id ska vara samma som i stilmallen-->
    <div id="min_ikon" class="icon32"><br /></div>
</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php /** Standard ikoner **/ ?>
 
1#    <?php screen_icon('themes'); ?>
2#    <?php screen_icon('edit-comments'); ?>
3#    <?php screen_icon('index'); ?>
4#    <?php screen_icon('link'); ?>
5#    <?php screen_icon('upload'); ?>
6#    <?php screen_icon('page'); ?>
7#    <?php screen_icon('plugins'); ?>
8#    <?php screen_icon('tools'); ?>
9#    <?php screen_icon('options-general'); ?>
10#   <?php screen_icon('edit'); ?>
11#   <?php screen_icon('profile'); ?>

Låt användarna fylla i Formulär

När du vill låta dina användare fylla i inställningar till ditt plugin så gör du det snyggast genom att ha varje val på varsin rad i en table med klassen form-table.

Varje rad har en <th>-cell med rubriken till varje val. Denna skall ha atributet scope=”row”. Detta följt av en <td>-cell med själva valet, <input>-taggen.

Efter att du avslutat tabellen sätter du in din spara knapp, och avslutar sedan formuläret med </form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Formulär som skickas till options.php för att automatiskt sparas med funktioner från WordPress 2.7+ -->
<form method="post" action="options.php">
    <table class="form-table">
 
        <!-- Första raden en vanlig text input -->
        <tr valign="top">
            <th scope="row">
                <label for="mitt_option_namn">Mitt option namn</label>
            </th>
            <td>
                <input type="text" name="mitt_option_namn" value="<?php echo get_option('mitt_option_namn'); ?>" />
            </td>
        </tr>
 
 
        <!-- Andra raden en radio knapp -->
        <tr valign="top">
            <th scope="row">Kön</th>
            <td>
                <input type="radio"  <?php echo get_option('mitt_radio_val') == 'man'?'checked="checked"':''; ?> name="mitt_radio_val" id="mitt_radio_val_1" value="man" />
                <label for="mitt_radio_val_1">Man</label>
                <br />
 
                <input type="radio"  <?php echo get_option('mitt_radio_val') == 'kvinna'?'checked="checked"':''; ?> name="mitt_radio_val" id="mitt_radio_val_2" value="kvinna" />
                <label for="mitt_radio_val_2">Kvinna</label><br />
            </td>
        </tr>
 
    </table>
 
    <p class="submit">
    <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
 
</form>

<label for=”mitt_option_namn”> gör att man markerar input-rutan (eller markerar respektive radio-val) med samma id, ifall man klickar på texten.

<?php echo get_option(‘mitt_option_namn’); ?> hämtar ett tidigare sparat svar, så att användaren inte måste fylla i samma information flera gånger.

I fallet med radio knapparna skriver den ut ”selected=selected” på det radiovalet som tidigare har blivit sparat.

Visa informationen i professionella Tabeller

Tabeller kan man göra riktigt snygga genom att definiera klassen widefat i <table> och sedan specificera både en <thead> och <tfoot >. Efter det sköter den allt själv.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table class="widefat">
    <thead>
        <tr>
            <th>Id</th>
            <th>Namn</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
       <tr>
         <td>1</td>
         <td>Mr X</td>
         <td>mrx@wordpressguru.se</td>
       </tr>
       <tr>
         <td>2</td>
         <td>Fru Söt</td>
         <td>frusot@wordpressguru.se</td>
       </tr>
    </tbody>
    <tfoot>
        <tr>
        <th>Id</th>
        <th>Namn</th>
        <th>Email</th>
        </tr>
    </tfoot>
</table>

Gör Navigation snyggare

För att få den riktigt snygga navigationen att fungera, så måste den först inneslutas av en div med klassen tablenav och senare en till div med klassen tablenav-pages. Det är sedan inuti detta som navigationen tar plats. Varje länk består av en <a>-tag med klassatributet page-numbers, eller en <span> som dessutom ska ha klassen current, ifall den är markerad.

<div class="tablenav">
    <div class="tablenav-pages">
        <span class="displaying-num">Visar 16—30 av 263</span>
        <a class="prev page-numbers" href="/wp-admin/edit.php?paged=1">«</a>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=1">1</a>
        <span class="page-numbers current">2</span>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=3">3</a>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=4">4</a>
        <span class="page-numbers dots">...</span>
        <a class="page-numbers" href="/wp-admin/edit.php?paged=17">17</a>
        <a class="next page-numbers" href="/wp-admin/edit.php?paged=3">»</a>
    </div>
</div>
Tips
— skrivs &mdash;
« skrivs &laquo;
» skrivs &raquo;

Inkludera globala Stylesheets och egna Stilmallar

För att kunna utnyttja alla stilmallar som WordPress redan har skrivit måste du se till att dem läses in i början av ditt plugin.

Genom funktionen wp_enqueue_style kan du inkludera de stilmallar du vill använda.
De flesta ingår i stilmallarna global eller wp-admin så vi ser till att inkludera dem. Ifall vi har en egen stilmall kan vi inkludera den med samma funktion, vi behöver då ange sökvägen till den:

1
2
3
wp_enqueue_style('global');
wp_enqueue_style('wp-admin');
wp_enqueue_style('min-css', get_bloginfo('url') . '/wp-content/plugins/mitt_plugin/min_css.css');

Avslutning

Om det är någonting jag inte har tagit upp här, eller om du skulle hitta någonting som någon annan har gjort som du tycker är snyggt, så är det bästa sättet ,att lista ut hur personen har gjort, att använda Firebug till Mozilla Firefox. Där kan du se vilka element som är viktiga för att någonting ska ske.

Du kan även läsa igenom css filen rakt av då alla css filer ligger under /wp-admin/css/. Där kan du även se vilka andra css-filer du kan inkludera i ditt plugin.

Experimentera och ha roligt. Det är det viktigaste.


7 kommentarer till 'Styla dina Plugins på rätt sätt' »»

Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>