Професионална програма
Loading...
Vlado23 avatar Vlado23 7 Точки

WP Custom Widget?

Отскоро започнах с wp и повечето бейсик неща ги разбрах, но имам един проблем, който не зная точно как да го търся из нета, за да го реша, защото не знам какво точно трябва да се направи.Имам това:

https://codepen.io/Hala1892/pen/rKXZOX

Искам в wp да го направя може би като уиджет(не съм много сигурен дали това е правилното решение) и като се вкара нова услуга, тя да се вкарва със снимка, отделно инфо за информация, което да отива в модула за инфо и отделно за цена.В същото време и самата услуга да си има една нейна цяла страница с цялата информация вътре(снимка,инфо,цена).Не искам някой да тръгне да ми го прави, разбира се, но ми трябва помощ да ме опътите един вид какво ми трябва, какво да търся, най-добрия начин да се направи и т.н.Правилната посока с други думи, защото малко се позагубих.

Благодаря.

 

ПС. Надявам се да се е разбрало какъв ефект търся, въпреки уникално обърканото обяснение.

Тагове:
0
Web Basics
Vlado23 avatar Vlado23 7 Точки

Всъщност успях да се справя и исках да пиша в темата, но не намирах време.Ще напиша стъпка по стъпка как направих нещата, за да помогна евентуално на някой друг, който се лутал и се стреснал първоначално от wp :)

Така...

1) Регистрираме custom post type във functions.php в папката на нашата тема.

function yourname_post_type () {
    $labels = array( /* <- тук пишете нещата, които ще се визуализират във вашето wp меню, попълни полетата */
        'name' => 'Име на cpt',
        'singular_name' => 'Име в ед.число',
        'add_new' => 'Добави нов',
        'all_items' => 'Всички',
        'add_new_item' => 'Добави нов',
        'edit_item' => 'Промени',
        'new_item' => 'Нов',
        'view_item' => 'Виж елемент',
        'search_item' => 'Търси',
        'not_found' => 'Няма намерен резултат',
        'not_found_in_trash' => 'Няма намерен резултат в кошче',
        'parent_item_colon' => 'Бащен елемент',
    );
    $args = array(/* <- тук добавяте с какви функции и полета ще разполага новия cpt, който сте направили */
        'labels' => $labels, /* добавяме си имената от по-горе */
        'public' => true,
        'has_archive' => false,
        'publicly_queryable' => true,
        'query_var' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        'hierarchical' => true,
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'thumbnail',
            'revision',
            'custom-fields',
            'post-formats'
        ),
        'taxonomies' => array('category','post_tag','post-formats'),
        'menu_position' => 5, 
        'exclude_from_search' => false
    );
    register_post_type('yourname', $args); /* <- Регистрирате cpt-о*/
}
add_action(‘init’,’yourname_post_type’); /* Добавяте го към менюто */


Това е просто примерен вариант.Всякакви други функции, които може да се добавят или какво означават тези по-горе, може да видите на този адрес:
https://codex.wordpress.org/Function_Reference/register_post_type

Това ни създава ново поле в wp менюто ни, реално подобно на нормалното за публикации, което си изоплзваме.Влизаме, пишем си, постваме.

 

2) Трябва да визуализираме тези постове

Ще дам пример по моделът, който исках да направя аз и бях качил по-горе, но работи по същия начин за всичко.

Влизаме или създаваме страницата, в която искаме да бъде визуализирани cpt-постовете и създаваме цикъл, който да ги визуализира:

<?php 
$args = array('post_type' => 'yourname'); /*Добавяте аргументи т.е. постове с какви характеристики искате да се показват, в случая само тези от вашия cpt.Повече възможности ще намерите на тази страница: https://codex.wordpress.org/Template_Tags/get_posts */
$loop = new WP_Query($args);/* променлива, която хваща аргументите и ги върти през цикъла */
if ($loop->have_posts()): /* цикъл, ако според аргументите има постове -> направи това */
    while( $loop->have_posts()) :$loop->the_post();?> /* цикъл, докато аргументите имат постове, вземи пост от аргументите */
            <?php get_template_part('custom','type'); ?> /* Това е шаблона, на всеки ваш пост, може да го наименувате, както пожелаете */
            <?php endwhile;
endif;

wp_reset_postdata();?>

3) Правим шаблона

В случая създаваме файл в директорията на нашата тема с име custom-type.php, но името е рандъм, трябва просто да съвпада с посоченото по-горе.Вътре поставяме шаблона за това как и какво да се визуализира от един пост.В примерът по-горе имах три услуги, като всяка имаше снимка, заглавие, цена, информация и искахме да си има отделна страничка за всяка с пълната информация за нея.Пишете си html-a и css-a и на определените от вас места си поставяте различни команди:

За снимката:

<img class="your-image" <?php the_post_thumbnail();?>

Заглавието:

<?php the_title();?>

Заглавието да е с линк към поста:

<?php the_title( sprintf('<h1 class="your-title"><a href="%s">', esc_url(get_permalink())),'</a></h1>'); ?>

Кратка информация:
Първо, когато създавате публикацията си създайте custom field с името, което желаете, в случая ‘Информация’ и ‘Цена’.

<?php echo get_post_meta( get_the_ID(), 'Информация', true ); ?>

Пълната информация:
 

<?php the_content(); ?>

Вариантите за функциите, които може да викате, да ги въртите и т.н. са много, реално всичко.

Вече всичко е визуализирано на страницата, както си трябва.Остава последната стъпка.

4) Шаблон за отделна страница на всеки пост

Създаваме си файл с име single-(името на cpt-o).php и вътре хвърляме шаблона, който искаме да се използва по абсолютно същия начин си викаме функции и т.н.

 

Това е всичко.Надявам се да помогне на някой друг.Не е било толкова сложно всичко, колкото изглеждаше в началото.Реално за седмица-две напреднах доста и с php-то и с wp-а и сега ми е доста по-комфортно пред vs-ото и се отпускам да си пиша и изпробвам сам нови неща.

Трябва да кажа, че страшно много ми помогнаха клиповете на този човечец в Ютуб -Alessandro Castellani.И по специално уроците му от поредицата Wordpress 101, където подробно обеснява как се прави всичко от бяло поле: https://www.youtube.com/watch?v=oTRZYnYQlmo&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE

Заслужават си и следващите му уроци Create Premium Wordpress Theme,Create Wordpress Mega Menu from Scratch и Wordpress Starter Theme for Developers.

1
03/09/2018 09:07:39
mtenev avatar mtenev 148 Точки

Vlado23,

Супер си! Много благодарим, че се върна и предостави подробна и изчерпателна информация по въпроса. Със сигурност ще е от полза!

Все така вдъхновен, деен и много успехи!

Поздрави.

0