Creare Portofoliu cu jQuery
Iun 2013 03

Ti-ai dorit un plugin de portofoliu care sa fie bazat pe jQuery? Noi vom da un exemplu de Portofoliu cu jQuery si il vom pune in aplicare pe o platforma WordPress. Ei bine, vom trece printr-un tutorial simplu, pas cu pas pentru a va ajuta sa creati si sa folositi un portofoliu personalizat.

Deci, deschideti editorul de texte favorit si putem sa incepem!

Pasul 1 – Creare Post Type

Pentru gestionarea codurilor putem incepe prin a crea un folder numit portofoliu, un fisier PHP numit portfolio-post-types.php (sau orice gasiti mai potrivit).
Dupa ce ati creat fisierul, sa adaugam codul…

Sa incepem prin crearea unei functii:

<?php  
 
    // function: post_type INCEPUT  
    function post_type()  
    {  
        // We will fill this function in the next step  
    } // function: post_type SFARSIT

Acum, ca ne-am creat functia noastra goala, sa adaugam un cod pentru ca functia sa faca ceva special. In primul rand, crearea de etichete de tip mesaj personalizat. Introducem urmatoarea bucata de cod in functia noastra post_type

$labels = array(
        ‘name’ => __( ‘Portfolio’),
        ‘singular_name’ => __(‘Portfolio’),
        ‘rewrite’ => array(
                ‘slug’ => __( ‘portfolio’ )
        ),
        ‘add_new’ => _x(‘Add Item’, ‘portfolio’),
        ‘edit_item’ => __(‘Edit Portfolio Item’),
        ‘new_item’ => __(‘New Portfolio Item’),
        ‘view_item’ => __(‘View Portfolio’),
        ‘search_items’ => __(‘Search Portfolio’),
        ‘not_found’ =>  __(‘No Portfolio Items Found’),
        ‘not_found_in_trash’ => __(‘No Portfolio Items Found In Trash’),
        ‘parent_item_colon’ =>
);

Mai departe, creati argumentele pentru tipul nostru de mesaj personalizat. Introduceti urmatoarea bucata de cod in functia noastra post_type:

$args = array(
        ‘labels’ => $labels,
        ‘public’ => true,
        ‘publicly_queryable’ => true,
        ‘show_ui’ => true,
        ‘query_var’ => true,
        ‘rewrite’ => true,
        ‘capability_type’ => ‘post’,
        ‘hierarchical’ => false,
        ‘menu_position’ => null,
        ‘supports’ => array(
                ‘title’,
                ‘editor’,
                ‘thumbnail’
        )
);

Acum, tipul nostru de mesaj este configuram cu setarile, pentru a inregistra tipul nostru de mesaj prin introducerea urmatorului cod in functia noastra post_type:

register_post_type(__( ‘portfolio’ ), $args);

Format Mesaj Tip personalizat de ieșire

Acum avem tipul nostru de mesaj personalizat creat. Incepem sa facem formatul de iesire, astfel incat sa putem obtine mesaje user-friendly. Incepeti prin a crea o alta functie in portfolio-post-type.php

// function: portfolio_messages INCEPUT
function portfolio_messages($messages)
{
        $messages[__( ‘portfolio’ )] =
                array(
                        0 => ,
                        1 => sprintf((‘Portfolio Updated. <a href="%s">View portfolio</a>’), esc_url(get_permalink($post_ID))),
                        2 => __(‘Custom Field Updated.’),
                        3 => __(‘Custom Field Deleted.’),
                        4 => __(‘Portfolio Updated.’),
                        5 => isset($_GET[‘revision’]) ? sprintf( __(‘Portfolio Restored To Revision From %s’), wp_post_revision_title((int)$_GET[‘revision’], false)) : false,
                        6 => sprintf(__(‘Portfolio Published. <a href="%s">View Portfolio</a>’), esc_url(get_permalink($post_ID))),
                        7 => __(‘Portfolio Saved.’),
                        8 => sprintf(__(‘Portfolio Submitted. <a target="_blank" href="%s">Preview Portfolio</a>’), esc_url( add_query_arg(‘preview’, ‘true’, get_permalink($post_ID)))),
                        9 => sprintf(__(‘Portfolio Scheduled For: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview Portfolio</a>’), date_i18n( __( ‘M j, Y @ G:i’ ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
                        10 => sprintf(__(‘Portfolio Draft Updated. <a target="_blank" href="%s">Preview Portfolio</a>’), esc_url( add_query_arg(‘preview’, ‘true’, get_permalink($post_ID)))),
                );
        return $messages;

} // function: portfolio_messages SFARSIT

Creare Taxonomy

Incepem prin a crea o alta functie numita portfolio_filter si introduceti codul de mai jos:

// function: portfolio_filter INCEPUT
function portfolio_filter()
{
        register_taxonomy(
                __( "filter" ),
                array(__( "portfolio" )),
                array(
                        "hierarchical" => true,
                        "label" => __( "Filter" ),
                        "singular_label" => __( "Filter" ),
                        "rewrite" => array(
                                ‘slug’ => ‘filter’,
                                ‘hierarchical’ => true
                        )
                )
        );
} // function: portfolio_filter SFARSIT

Avem nevoie pentru a initia in cele din urma toate codurile noastre, astfel incat acesta va fi afisat in administrare. Adaugam urmatorul cod in partea de jos a fisierului nostru:

add_action( ‘init’, ‘post_type’ );
add_action( ‘init’, ‘portfolio_filter’, 0 );
add_filter( ‘post_updated_messages’, ‘portfolio_messages’ );

Acum, deschidem fisierul din WordPress functions.php si introducem urmatoarea linie de cod:

include("portfolio/portfolio-post-types.php");

Pasul 2 – Creare Pagina Portofoliu

Acum ca avem toate setarile de portofoliu complete, avem nevoie pentru a scoate totul in interfata portofoliului dvs. Vom incepe acest lucru prin crearea unui noi fisier PHP numit portfolio.php. In primul rand haideti sa adaugati unele dintre elementele esentiale pentru crearea unui sablon pe pagina:

<?php /* Template Name: Portfolio */ ?>

        <?php get_header(); ?>
       
        <!– #content  INCEPUT  –>
        <div  id="content" class="clearfix">
       
                // Vom adauga continutul mai tarziu
               
        </div><!– #content  SFARSIT –>
       
<?php  get_footer(); ?>

Acum avem sablonul paginii noastre creat, avem nevoie pentru a afisa portofoliul nostru. Avem nevoie sa creati o prima pagina, care va actiona ca pagina principala de portofoliu ( ->Add New ). Pe partea dreapta vedeti o caseta intitulata atributele paginii, selectati sablon si modelul pe care doriti sa le afisati in portofoliu si apoi faceti public.

Afisare Filtru

Acum sa ne intoarcem la editarea sablonului nostru pentru pagina de portofoliu si sa incepem prin a introduce filtrul. In primul rand vom incepe prin a aranja filtrul intr-o lista neordonata si fiecare dintre categorii va fi un element in lista.

<ul class="filter clearfix">

        <li><strong>Filter:</strong></li>
        <li class="active"><a href="javascript:void(0)" class="all">All</a></li>

</ul>

Sa adaugam ceva PHP pentru ca filtrul nostru sa genereze automat categoriile de filtru care sunt utilizate in portofoliul nostru.

<?php
        $terms = get_terms(‘filter’, $args);
        $count = count($terms);
        $i=0;
        if ($count > 0) {
                foreach ($terms  as $term) {
                $i++;
                $term_list  .= ‘<li><a href="javascript:void(0)" class="’.  $term->slug .‘">’ . $term->name . ‘</a></li>’;
               
                        if ($count  != $i)
                        {
                                $term_list .= ;
                        }
                        else
                        {
                                $term_list .= ;
                        }
                }
                echo $term_list;
        }
?>

Ce vom face aici prima data este sa initializam taxonomia pentru filtru in cazul nostru.
In al doilea rand, atribuim un numar cu categoriile noastre pentru a incrementa fiecare element din filtrul nostru, apoi aplicam conditionalitatea pentru a verifica daca numarul pe care l-am stabilit este mai mic decat 0; ceea ce inseamna ca daca nu sunt categorii in filtru sau nu sunt categorii atribuite elementelor de portofoliu, nimic nu va fi redat. Daca exista categorii in filtrul nostru, atunci vrem sa modifice iesirea pentru fiecare in parte.

Facem acest lucru prin urmatoarea linie din segmentul nostru de cod:

$term_list .= ‘<li><a  href="javascript:void(0)" class="’. $term->slug .‘">’ . $term->name . ‘</a></li>’;

Afisare Elemente din Portofoliu

Vom incepe prin crearea unui nou obiect WP_Query si trecem parametrii corecti.

<?php
        $wpbp = new WP_Query(array(
                        ‘post_type’ =>  ‘portfolio’,
                        ‘posts_per_page’  =>‘-1′
                )
        );
?>

Acum ca avem un obiect de interogare query, putem face referinta, sa facem Loop pentru elementele din portofoliul nostru. Incepem prin introducerea codului:

<?php if ($wpbp->have_posts()) : while  ($wpbp->have_posts()) : $wpbp->the_post(); ?>

        <?php // Tot continutul portofoliului se va introduce aici… ?>
       
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>

Deschidem functions.php pentru a introduce un de suport pentru imaginile-thumbnils si setam marimea de 56px cu 56px.

if ( function_exists( ‘add_theme_support’ ) )
{
        add_theme_support(  ‘post-thumbnails’ );
        set_post_thumbnail_size(  56, 56, true );
}

Introduceti codul de mai jos pe o linie: set_post_thumbnail_size

add_image_size( ‘portfolio’, 295, 150, true );

Introducem urmatorul cod in WordPress Loop:

<ul class="filterable-grid clearfix">
        <li>
       
                <?php if (  (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) :  ?>
               
                        <?php  the_post_thumbnail(‘portfolio’); ?>
                       
                <?php endif;  ?>
               
                <p><a  href="<?php the_permalink(); ?>"><?php echo  get_the_title(); ?></a></p>
               
        </li>
</ul>

Conectare Articole Portofoliu & Filtre

Introducem codul de mai jos in Loop:

<?php $terms = get_the_terms( get_the_ID(), ‘filter’ ); ?>

Apoi, vom adauga unele atribute la elementul nostru listat (li).

<li data-id="id-<?php echo $count; ?>"  data-type="<?php foreach ($terms as $term) { echo  strtolower(preg_replace(‘/\s+/’, ‘-’, $term->name)). ‘ ‘; } ?>">

Adaugam urmatorul cod chiar inainte sa terminat sectiunea loop:

<?php $count++; ?>

Codul Final pentru Afisarea Portofoliului

<ul class="filterable-grid clearfix">

        <?php $wpbp = new WP_Query(array(  ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>‘-1′ ) ); ?>

        <?php if ($wpbp->have_posts()) :  while ($wpbp->have_posts()) : $wpbp->the_post(); ?>

        <?php $terms = get_the_terms(  get_the_ID(), ‘filter’ ); ?>

                <li data-id="id-<?php echo  $count; ?>" data-type="<?php foreach ($terms as $term) { echo  strtolower(preg_replace(‘/\s+/’, ‘-’, $term->name)). ‘ ‘; } ?>">
       
                        <?php if ( (function_exists(‘has_post_thumbnail’)) && (has_post_thumbnail()) ) :  ?>
                       
                                <?php  the_post_thumbnail(‘portfolio’); ?>
                       
                        <?php endif; ?>
               
                        <p><a href="<?php the_permalink(); ?>"><?php echo get_the_title();  ?></a></p>
       
                </li>

        <?php $count++; ?>
        <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>

</ul>

Pasul 3 – jQuery & Quicksand

Haideti sa cream un fisier de activare JavaScript gol, numit jquery.custom.js. Acum ca avem toate scripturile esentiale, deschidem functions.php si cream o functie goala numita register_js.

// Inregistram scipturile noastre
function register_js()
{
        if ( !is_admin() )
        {
                wp_register_script( ‘quicksand’, get_template_directory_uri() . ‘/js/jquery.quicksand.js’, ‘jquery’ );

                wp_register_script( ‘easing’, get_template_directory_uri() . ‘/js/jquery.easing.1.3.js’, ‘jquery’ );

                wp_register_script( ‘custom’, get_template_directory_uri() . ‘/js/jquery.custom.js’, ‘jquery’, ’1.0′, true );

                wp_enqueue_script( ‘jquery’ );
                wp_enqueue_script( ‘quicksand’ );
                wp_enqueue_script( ‘easing’ );
                wp_enqueue_script( ‘custom’ );
        }
}

In cele din urma avem nevoie pentru a initializa functia noastra prin adaugarea codului in fisierul nostru functions.php:

add_action(‘init’, ‘register_js’);

Scriere Quicksand

Deschidem jquery.custom.js si adaugam urmatorul cod:

jQuery(document).ready(function() {

        // Aici introducem scriptul quicksand….

}); // SFARSITUL DOCUMENTULUI

Cream o functie portfolio_quicksand si o introducem:

function portfolio_quicksand() {

        // Tot quicksandul se va intampla aici…

}

if(jQuery().quicksand) {

        portfolio_quicksand();

}

Introducem urmatorul cod in functia noastra portfolio_quicksand:

var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems;

$filter = $(‘.filter li.active a’).attr(‘class’);
$filterLink = $(‘.filter li a’);
$container = $(‘ul.filterable-grid’);
$containerClone = $container.clone();

$filterLink.click(function(e) {

        // We will add the content for this function now…    

});

        $(‘.filter li’).removeClass(‘active’);
       
        $filter = $(this).attr(‘class’).split(‘ ‘);
                       
        $(this).parent().addClass(‘active’);

        if ($filter == ‘all’) {
                $filteredItems = $containerClone.find(‘li’);
        }
        else {
                $filteredItems = $containerClone.find(‘li[data-type~=' + $filter + ']‘);
        }

        $container.quicksand($filteredItems,
        {
                duration: 750,
                easing: ‘easeInOutCirc’,
                adjustHeight: ‘dynamic’
        });

Codul Final pentru Quicksand

function portfolio_quicksand() {
       
        // Setting up our variables
        var $filter;
        var $container;
        var $containerClone;
        var $filterLink;
        var $filteredItems
       
        // Set our filter
        $filter = $(‘.filter li.active a’).attr(‘class’);
       
        // Set our filter link
        $filterLink = $(‘.filter li a’);
       
        // Set our container
        $container = $(‘ul.filterable-grid’);
       
        // Clone our container
        $containerClone = $container.clone();
 
        // Apply our Quicksand to work on a click function
        // for each of the filter li link elements
        $filterLink.click(function(e)
        {
                // Remove the active class
                $(‘.filter li’).removeClass(‘active’);
               
                // Split each of the filter elements and override our filter
                $filter = $(this).attr(‘class’).split(‘ ‘);
               
                // Apply the ‘active’ class to the clicked link
                $(this).parent().addClass(‘active’);
               
                // If ‘all’ is selected, display all elements
                // else output all items referenced by the data-type
                if ($filter == ‘all’) {
                        $filteredItems = $containerClone.find(‘li’);
                }
                else {
                        $filteredItems = $containerClone.find(‘li[data-type~=' + $filter + ']‘);
                }
               
                // Finally call the Quicksand function
                $container.quicksand($filteredItems,
                {
                        // The duration for the animation
                        duration: 750,
                        // The easing effect when animating
                        easing: ‘easeInOutCirc’,
                        // Height adjustment set to dynamic
                        adjustHeight: ‘dynamic’
                });
        });
}

Pasul 4 – Integrare LightBox (Optional)

Descarcam: PrettyPhoto v3 (sau ultima versiune)

Acum ca avem fisierele PrettyPhoto adaugam urmatorul cod in functions.php:

// Inregistrare stiluri
function register_css()
{
        if (!is_admin()) {
                wp_register_style( ‘prettyPhoto’, get_template_directory_uri() . ‘/css/prettyPhoto.css’ );
                wp_enqueue_style( ‘prettyPhoto’ );
        }
}

add_action( ‘init’, ‘register_css’ );

Deschidem portfolio.php si adaugam in WordPress Loop urmatoarea linie de cod:

<?php
        $large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), ‘fullsize’, false, );
        $large_image = $large_image[0];
?>

Dupa ce avem imaginea noastra full accesibila, vom initia acum PrettyPhoto pentru featured img:

<a rel="prettyPhoto" href="<?php  echo $large_image ?>"><?php the_post_thumbnail(‘portfolio’);  ?></a>

Sa ne intoarcem la partea jquery.custom.js si cream o alta functie goala sa sustina PrettyPhoto:

function lightbox() {

        // Functionalitatea pentru Lightbox va fi adaugata acum…

}

if(jQuery().prettyPhoto) {
        lightbox();
}

Initiem PrettyPhoto cu ajutorul codului:

jQuery("a[rel^='prettyPhoto']").prettyPhoto({
        animationSpeed:‘fast’,
        slideshow:5000,
        theme:‘pp_default’,
        show_title:false,
        overlay_gallery: false,
        social_tools: false
});

Adaugam urmatorul script in portfolio_quicksand cu fisierul jquery.custom.js:

$container.quicksand($filteredItems,
        function () { lightbox(); }
);

Pasul 5 – Integrare Paginare (Aditional)

Pentru a face acest lucru ne trebuie plugin-ul WP_PageNavi.
Daca nu il avem instalat ne indreptam catre Plugins -> Add New si cautam WP_PageNavi apasand pe link-ul “Instalare” si “Activare”.

In fisierul paginii sablon a Portofoliului nostru facem urmatoarele modificari:

$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1;
$wpbp = new WP_Query(array( ‘post_type’ => ‘portfolio’, ‘posts_per_page’ =>’2′, ‘paged’ => $paged ) );

Super, acum avem numerotatie pe paginile portofoliului nostru. Urmatorul cod verifica daca WP_PageNavi este instalat:

<?php
        if(function_exists(‘wp_pagenavi’))
        {
                wp_pagenavi(array(  ‘query’ => $wpbp ) );
                wp_reset_postdata();
        }
?>

Asta este tot! Veti avea un portofoliu complet functional cu Quicksand, Lightbox si paginare.
Sursa Tuts+

Scrie un comentariu