In acest tutorial o sa va invat cum se face un slider pentru o tema wordpress cu administrare din panoul de optiuni al platformei.Este ideal pentru teme care se folosesc la proiecte gen filme sau jocuri.Am gasit un tutorial pe net si lam aplicat la temele mele.Vezi foto.
Pentru inceput se adauga acest cod in functions.php al temei:
// Custom Post types for Feature project on home page
add_action('init', 'create_feature');
function create_feature() {
$feature_args = array(
'labels' => array(
'name' => __( 'Slider' ),
'singular_name' => __( 'Slide' ),
'add_new' => __( 'Add New Slide' ),
'add_new_item' => __( 'Add New Slide' ),
'edit_item' => __( 'Edit Slide' ),
'new_item' => __( 'Add New Slide' ),
'view_item' => __( 'View Feature Slide' ),
'search_items' => __( 'Search Feature Slide' ),
'not_found' => __( 'No feature slide found' ),
'not_found_in_trash' => __( 'No feature slide found in trash' )
),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'menu_position' => 20,
'supports' => array('title', 'editor', 'thumbnail')
);
register_post_type('feature',$feature_args);
}
add_filter("manage_feature_edit_columns", "feature_edit_columns");
function feature_edit_columns($feature_columns){
$feature_columns = array(
"cb" => "",
"title" => "Title",
);
return $feature_columns;
}
add_action( 'add_meta_boxes', 'cd_meta_box_add' );
function cd_meta_box_add()
{
add_meta_box( 'my-meta-box-id', 'Link to Project', 'cd_meta_box_cb', 'feature', 'normal', 'high' );
}
function cd_meta_box_cb( $post )
{
$url = get_post_meta($post->ID, 'url', true);
wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?>
array( // on allow a tags
'href' => array() // and those anchors can only have href attribute
)
);
// Probably a good idea to make sure your data is set
if( isset( $_POST['url'] ) )
update_post_meta( $post_id, 'url', wp_kses( $_POST['url'], $allowed ) );
}
Acum deja in parte stanga veti vedea ca in meniu a aparut sliderul.Dar inca nu e gata tot.
In index.php inainte de continutul efectiv al articolelor dupa <wp_header> se introduce acest cod:
Urmatorul pas este adaugare codului jquery pentru slider in footer.php al temei dupa acest codul
Acum sa adaugam si codul pentru style.css:
/* Home page featured slider*/
#featured-slider {
margin:5px 12px;
float:left;
width:930px;
height:280px;
position:relative;
}
#featured-slider #slides {
position:absolute;
top:0px;
left:0px;
z-index:100;
}
#featured-slider .slides_container {
width:930px;
overflow:hidden;
position:relative;
display:none;
background:#ddd;
border:1px solid #aaa;
}
#featured-slider .slides_container div.slide {
width:930px;
height:280px;
display:block;
}
#featured-slider .caption {
z-index:500;
position:absolute;
top: 30px; left:670px;
height:220px;
width:240px;
font-size:12px;
line-height:22px;
color:#000;
}
#featured-slider .caption h2 {
font-size:18px;
line-height:22px;
margin-bottom:10px;
color:red;
}
#featured-slider #slides .next, #slides .prev {
position:absolute;
top:112px;
left:-10px;
width:25px;
height:37px;
display:block;
z-index:101;
text-indent:-99999em;
background: url(images/larr.gif);
}
#featured-slider #slides .next {
left:916px;
background: url(images/rarr.gif);
}
Descarcati imaginile urmatoare si punetile in folderul images al temei,daca nu aveti un folder cu acest nume in tema creati unul si puneti pozele acolo.
Acum ultimul cod si suntem gata:introduceti tot in footer.php dupa acest cod :
Descarcati acest fisier: slides.min.jquery.js si introducetil inntr-un folder din tema voastra numit js.
Daca nu va descurcati ma gasiti la pagina de contact si va ajut cu placere.Succes.
Demo slider.