• Home
  • /Blog
  • /Ξεκινώντας με τα WordPress Shortcodes !
Ξεκινώντας με τα WordPress Shortcodes !

Ξεκινώντας με τα WordPress Shortcodes !

Tα wordpress shortcodes εισήχθησαν για πρώτη φορά στη έκδοση 2.5, μας βοηθούν να δημιουργήσουμε ‘μακροκώδικες ‘ και να τους χρησιμοποιήσουμε μέσα στο περιεχόμενό μας.
Είναι ένας πολύ καλός τρόπος για να δημιουργήσετε ένα δυναμικό διαφημιστικό spot για παράδειγμα ή ένα call to action button.

Στο παρακάτω παράδειγμα θα δημιουργήσουμε ένα call to action button.
Θα πρέπει να επικολλήσετε τον παρακάτω κώδικα μέσα στο περιεχόμενό σας, για να εμφανίσετε το κουμπί. Έπειτα μπορείτε να επεξεργαστείτε την εμφάνιση και την λειτουργικότητά του , μέσα στο αρχείο functions.php του ενεργού σας template.

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Για να προσαρμόσουμε το κουμπί θα μπορούσαμε απλά να προσθέσουμε
[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

ή για να το κάνουμε ακόμα καλύτερο θα μπορούσαμε να προσθέσουμε ένα enclosing shortcode π.χ

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Με λίγη φαντασία μπορούμε να αξιοποιήσουμε τη δύναμη των shortcodes. Σε αυτό το άρθρο θα δούμε 2 διαφορετικούς τύπους από shortcodes. Μερικά από αυτά είναι έτοιμα για χρήση στο δικό σας wordpress!

 

Δημιουργία ενός self enclosing (αυτοκλειόμενο) shortcode, που είναι και η απλούστερη μορφή ενός shortcode.Παρακάτω θα δημιουργήσουμε ένα απλό link για το twitter μας και μετά θα το προσθέσουμε στο site μας.

<?php 
function button_shortcode() {
    return '<a href="http://twitter.com/creationweb" class="twitter-button">Follow me on Twitter!</a>"';
}
add_shortcode('button', 'button_shortcode'); 
?>

Χρήση:

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Δημιουργία ενός self enclosing (αυτοκλειόμενο) shortcode με παραμέτρους
Τα shortcodes υποστηρίζουν παραμέτρους που μας βοηθούν να το προσαρμόσουμε ανάλογα με τις ανάγκες μας. Σε αυτό το παράδειγμα έχουμε δύο διαφορετικά κουμπιά, οπότε πρέπει να καθορίσουμε ποιο κουμπί θέλουμε να εμφανίσουμε.

<?php
function button_shortcode($type) {
    extract(shortcode_atts(array(
        'type' => 'type'
    ), $type));

    // check what type user entered
    switch ($type) {
        case 'twitter':
            return '<a href="http://twitter.com/creationweb" class="twitter-button">Follw me on Twitter!</a>';
            break;
        case 'rss':
            return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>'
            break;
    }
}
add_shortcode('button', 'button_shortcode');
?>

Τώρα μπορούμε να επιλέξουμε ποιο κουμπί θα εμφανίσουμε

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Τι θα κάναμε όμως αν θέλαμε να αλλάξουμε το κείμενο για παράδειγμα?
Ας δούμε πως μπορούμε να το κάνουμε αυτό με το σωστό τρόπο.

Δημιουργία ενός enclosing shortcode.

Τα enclosing shortcodes μας επιτρέπουν να ενσωματώσουμε περιεχόμενο μέσα τους όπως ακριβώς τα Bbcodes. Ίσως έχετε χρησιμοποιήσει κάποια από αυτά

<?php
function button_shortcode( $attr, $content = null ) {
    return '<a href="http://twitter.com/creationweb" class="twitter-button">' . $content . '</a>';
}
add_shortcode('button', 'button_shortcode');
?>

Χρήση

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Για να κάνουμε το κουμπί μας καλύτερο μπορούμε να προσθέσουμε παραμέτρους όπως κάναμε στο προηγούμενο παράδειγμα. Ας προσθέσουμε δύο παραμέτρους αυτή τη φορά.
Μία παράμετρο για το username μας και μία για το στυλ του κουμπιού μας. Επίσης θα μπορούμε να επιλέξουμε ποιο λογαριασμό θα συνδέσουμε.

<?php
function button_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'account' => 'account',
      'style' => 'style'
      ), $atts ) );

   return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>';
}
add_shortcode('button', 'button_shortcode');
?>

Χρήση

[sws_shortcode width=»450″ float=»none» class=»sws_grey»] [/sws_shortcode]

 

Παρακολουθήστε τα μαθήματα wordpress για περισσότερες συμβουλές και κόλπα.

by Creationweb