Skapa egna quicktags

written by Lena on November 26, 2008 in Bloggat with no comments

Låt oss ta din kommentarfunktion som exempel. Dina besökare skriver en kommentar som du gärna vill besvara. Men det ska synas att det är du som svarar, och du vill kanske formatera ditt svar. Låt oss börja med koden i quicktags.js.

edButtons[edButtons.length] =
new edButton('ed_svar'
,'svar'
,'<div class="svar">'
,'</div>'
,'svar'
);

Om du kikar på mina kommentarer så ser du hur det kan se ut. Själva html/php-koderna som bygger upp divblocken i comments.php ser ut så här:

<div class="kommentarbox"><!-- start kommentarbox -->
<div class="commenthead">
<p class="commentdate">
<small class="day"><?php comment_date('d') ?>
</small>
<small class="month"><?php comment_date('m') ?>
</small>
</p>
</div>
<div class="middlecomment">
<p class="center">Postat av: <?php comment_author_link() ?>
<?php edit_comment_link(__("Edit"), ''); ?></p>
<div id="comment-<?php comment_ID() ?>">
<a href="#comment-<?php comment_ID() ?>"></a> </div>
<p><?php comment_text() ?> </p>
</div>
</div>

Jag har inte heller valt att göra några avancerade kommentarblock eftersom jag byter tema ganska ofta men självklart finns det egentligen inga gränser för fantasin. Man kan lägga till php-koden för author-gravatar om man vill, för den som kommenterar, hur många gånger personen har kommenterat osv. Men ju fler koder (om man tror att avancerat är lika med snyggt och bra) som infogas, desto längre tid tar det för sidan att svara eftersom databasen måste läsa in alla koder. Vill du ha en snabb men snygg kommentarfunktion bör det nog inte finnas alltför många funktioner.

Förena quicktags.js med css

Egentligen är det inga konstigheter. Det första Du behöver göra (som alltid) är att skissera hur dina kommentarblock ska se ut. När du väl har bestämt dig använder du din css till att formatera blocken, dels blocket som dina besökares kommentarer hamnar i och dels det block där dina svar ska hamna i. Eftersom vi vill kunna besvara flera kommentarer på samma sida kan vi inte använda oss av ett ID utan vi använder en class. Testa slutligen om dina block verkligen håller ihop innan du lägger in alla php-koder, annars blir det ju ett merarbete. Mer detaljerad information om hur man hanterar divblocket “svar” då det endast ska synas när du besvarar en kommentar, finns längre fram i guiden.

När du är nöjd återgår du till kodblocket i quicktags.js. För att allt ska fungera behövs såväl en start- som sluttagg i koden då det blir ett självständigt divblock (class). Tänk på det när du skapar det.

edButtons[edButtons.length] =
new edButton('ed_svar'
,'svar'
,'<div class="svar">'
,'</div>'
,'svar'
);

När allt är klart så skickar du på quicktags.js i sin mapp (wp-includes/js/gicktags.js), stilmallen där den ska vara och sist comments.php. Nästa gång du öppnar din WordPress kommer du att se din nya knapp.

Hur lägga in mina kommentarsvar?

För att kunna besvara en kommentar måste du vara inloggad i WordPress. Varje kommentar har dessutom en länk som det står edit på, klicka på den så kommer du direkt in i redigerat läge. Allra längst ned under varje kommentar klickar du på snabbknappen “svar” som då öppnar upp blocket med koden div class=”svar”. Efter denna kod skriver du in ditt svar och klickar återigen på snabbknappen “svar” så att den stänger koden. Spara ditt svar. Nu finns dina svar i ett eget kommentarblock och det enda du behövde göra vara att trycka på en liten knapp. Du ska med andra ord inte lägga till några html-koder för själva divblocket “svar” i filen comments.php. Gör du det så kommer det att se konstigt ut om du inte har besvarat en kommentar. Tanken med denna snabbknapp är att den enbart ska generera ett divblock om du besvarar, inte annars.

Lycka till!

Liknande poster:

Share with me
Created by disruptive.nu