Share
Leer in deze tutorial hoe je een filterbare portfolio maakt met jQuery geïntegreerd met WordPress, onthoud dat dit soort portfolio een groot verschil kan maken voor je thema's!
Je kunt de code van deze tutorial gebruiken in elk thema dat je hebt gemaakt of aan het maken bent, we zullen eenvoudige stappen volgen en in mijn geval zal ik de standaard gebruiken Twintig elf thema en rennen WordPress 3.3. Oké, laten we werken!
U kunt de code die in deze zelfstudie wordt gebruikt, gebruiken in elk thema dat u hebt gemaakt of aan het maken bent.
We moeten een sectie maken over de gebelde beheerdersbalk project, in deze sectie maakt u alle portfolio-items met hun respectieve thumbnail en demolink.
Open de functions.php bestand en aan het einde laten we een functie maken om het projectitem te registreren. (Aan het einde van deze stap ziet u de volledige functie)
Accentsconagua
add_action ('init', 'project_custom_init'); / * SECTIE - project_custom_init * / function project_custom_init () // de restcode gaat hier / * #end SECTIE - project_custom_init - * / In deze code gebruiken we de add_action functie zodat wanneer WordPress begint te laden, onze functie zal worden aangeroepen.
Binnen de functie project_custom_init laat de code toevoegen die registreert a Aangepast berichttype riep project.
// Het volgende is alle namen, in onze tutorial gebruiken we "Project" $ labels = array ('name' => _x ('Projects', 'post type general name'), 'singular_name' => _x (' Project ',' berichttype enkelvoudige naam '),' add_new '=> _x (' Nieuw toevoegen ',' project '),' add_new_item '=> __ (' Nieuw project toevoegen '),' edit_item '=> __ (' Edit Project '),' new_item '=> __ (' Nieuw project '),' view_item '=> __ (' View Project '),' search_items '=> __ (' Search Projects '),' not_found '=> __ ('Geen projecten gevonden'), 'not_found_in_trash' => __ ('Geen projecten gevonden in de Prullenbak'), 'parent_item_colon' => ", 'menu_name' => 'Portfolio'); // Enkele argumenten en in de laatste regel 'ondersteunt', zeggen we tegen WordPress welke functies worden ondersteund in het Project-berichttype $ args = array ('labels' => $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true , 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'ondersteunt' => array ('title', 'ed itor ',' auteur ',' thumbnail ',' excerpt ',' comments ')); // We noemen deze functie om het aangepaste berichttype register_post_type ('project', $ args) te registreren; De bovenstaande code voegt een item toe in het Admin-menu met de naam Portefeuille en het zal in deze sectie zijn dat we alle portfolio-items maken.
Laten we nu binnen de functie meer code toevoegen.
// Initialiseer Taxonomie Labels $ labels = array ('naam' => _x ('Tags', 'taxonomie algemene naam'), 'singular_name' => _x ('Tag', 'taxonomie singuliere naam'), 'search_items' = > __ ('Zoektypes'), 'all_items' => __ ('Alle tags'), 'parent_item' => __ ('Oudertag'), 'parent_item_colon' => __ ('Bovenliggende tag:'), ' edit_item '=> __ (' Bewerk tags '),' update_item '=> __ (' Update Tag '),' add_new_item '=> __ (' Nieuwe tag toevoegen '),' new_item_name '=> __ (' Nieuwe tagnaam '),); // Registreer aangepaste taxonomie register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, // definieer of een systeem zoals tags of categorieën 'labels' => $ labels, 'show_ui' moet worden gebruikt => true, 'query_var' => true, 'rewrite' => array ('slug' => 'tag-portfolio'),)); Aandacht voor het 'hiërarchische' argument op de register_taxonomy functie, als je typt waar je hebt een systeemachtige categorie voor je portfolio-items, maar als je typt vals je hebt een systeem zoals tags. Ik geef de voorkeur aan het categorie-stijlsysteem.
O ja! De project_custom_init () functie is klaar! Zie hieronder voor de volledige code van deze functie.
add_action ('init', 'project_custom_init'); / * - Custom Post Init Begin - * / function project_custom_init () $ labels = array ('name' => _x ('Projects', 'post type general name'), 'singular_name' => _x ('Project ',' berichttype enkelvoudige naam '),' add_new '=> _x (' Nieuw toevoegen ',' project '),' add_new_item '=> __ (' Nieuw project toevoegen '),' edit_item '=> __ (' Bewerken Project '),' new_item '=> __ (' Nieuw project '),' view_item '=> __ (' View Project '),' search_items '=> __ (' Search Projects '),' not_found '=> __ ( 'Geen projecten gevonden'), 'not_found_in_trash' => __ ('Geen projecten gevonden in de Prullenbak'), 'parent_item_colon' => ", 'menu_name' => 'Project'); $ args = array ('labels' => $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array ('title', 'editor', 'author', 'thumbnail', 'excerpt ',' comments ')); // Het volgende is de belangrijkste stap bij het registreren van de post. register_post_t Ype ( 'project', $ args); // Initialiseer nieuwe taxonomie-labels $ labels = array ('name' => _x ('Tags', 'taxonomy general name'), 'singular_name' => _x ('Tag', 'taxonomy singular name'), 'search_items' => __ ('Zoektypen'), 'all_items' => __ ('Alle tags'), 'parent_item' => __ ('Oudertag'), 'parent_item_colon' => __ ('Oudertag:'), 'edit_item' => __ ('Edit Tags'), 'update_item' => __ ('Update Tag'), 'add_new_item' => __ ('Nieuwe tag toevoegen'), 'new_item_name' => __ ('Nieuwe tag Naam' ), ); // Aangepaste taxonomie voor projecttags register_taxonomy ('tagportfolio', array ('project'), array ('hierarchical' => true, 'labels' => $ labels, 'show_ui' => true, 'query_var' => true , 'rewrite' => array ('slug' => 'tag-portfolio'),)); / * - Aangepaste bericht-initialisatie - * / Als u nu naar Admin gaat, ziet u een nieuw item in het menu genaamd Portefeuille zoals de afbeelding hieronder:
Laten we een nieuwe functie maken die ervoor zorgt dat er leuke berichten worden getoond wanneer de gebruiker bijvoorbeeld een nieuw item in de portfolio of iets dergelijks creëert.
De onderstaande code moet worden ingevoerd onder onze laatste functie en niet erin.
/ * --- Custom Messages - project_updated_messages --- * / add_filter ('post_updated_messages', 'project_updated_messages'); function project_updated_messages ($ messages) global $ post, $ post_ID; $ messages ['project'] = array (0 => ", // Niet gebruikt. Berichten beginnen bij index 1. 1 => sprintf (__ ('Project bijgewerkt. Bekijk project'), esc_url (get_permalink ($ post_ID))) , 2 => __ ('Aangepast veld bijgewerkt.'), 3 => __ ('Aangepast veld verwijderd.'), 4 => __ ('Project bijgewerkt.'), / * Vertalers:% s: datum en tijd van de revisie * / 5 => isset ($ _ GET ['revisie'])? sprintf (__ ('Project hersteld naar revisie van% s'), wp_post_revision_title ((int) $ _GET ['revisie'], false)): false, 6 => sprintf (__ ('Project gepubliceerd. Bekijk project'), esc_url (get_permalink ($ post_ID))), 7 => __ ('Project saved.'), 8 => sprintf (__ ('Project ingediend Voorbeeld van project '), esc_url (add_query_arg (' preview ',' true ', get_permalink ($ post_ID)))), 9 => sprintf (__ (' Project gepland voor: % 1 $ s. Voorbeeld van project '), // vertalers: datumformaat publicatie, zie http://php.net/date date_i18n (__ (' M j, Y @ G: i '), strtotime ($ post-> post_date)), esc_url (get_permalink ($ post_ID))), 10 => sprintf (__ ('Projectvoorstel bijgewerkt. Voorbeeldproject'), esc_url (add_query_arg ('preview', 'true', get_permalink ($ post_ID)))),); return $ berichten; / * --- #end SECTIE - project_updated_messages --- * / Deze functie maakt aangepaste berichten voor wanneer een gebruiker de portfoliostand aanpast, zie een berichtvoorbeeld op de afbeelding hieronder:
U kunt zien dat u alleen met deze code tags / categorieën aan uw portfolio kunt toevoegen en nieuwe portfolio-items kunt maken! Maar laten we meer één functie toevoegen, goed idee? Zeker!
In deze stap zullen we een metabox toevoegen op het scherm voor het maken van portfolio-items waar de gebruiker een a kan plakken url naar de website of andere pagina.
Laten we drie functies maken om deze metabox toe te voegen waarin we onze URL voor het portfolio-item opslaan. De code gaat onder de laatste functie die we hebben gemaakt.
/ * --- Demo URL metabox --- * / add_action ('admin_init', 'portfolio_meta_init'); function portfolio_meta_init () // voeg een metabox toe voor WordPress 'project' type add_meta_box ('portfolio_meta', 'Project Infos', 'portfolio_meta_setup', 'project', 'side', 'low'); // voeg een callback-functie toe om alle gegevens op te slaan die een gebruiker invoert in add_action ('save_post', 'portfolio_meta_save'); function portfolio_meta_setup () global $ post; ?>
'; function portfolio_meta_save ($ post_id) // check nonce if (! isset ($ _ POST ['meta_noncename']) ||! wp_verify_nonce ($ _ POST ['meta_noncename'], __FILE__)) return $ post_id; // check mogelijkheden als ('post' == $ _POST ['post_type']) if (! current_user_can ('edit_post', $ post_id)) return $ post_id; elseif (! current_user_can ('edit_page', $ post_id)) return $ post_id; // afsluiten bij automatisch opslaan als (gedefinieerd ('DOING_AUTOSAVE') == DOING_AUTOSAVE) return $ post_id; if (isset ($ _ POST ['_ url'])) update_post_meta ($ post_id, '_url', $ _POST ['_ url']); else delete_post_meta ($ post_id, '_url'); / * --- #end Demo URL meta box --- * / Ik zal deze code niet in detail uitleggen, omdat je in deze tutorial over metaboxen kunt leren: Herbruikbare aangepaste metaboxen of gewoon een beetje zoeken via de WordPress Codex of op Google.
De bovenstaande code maakt slechts één metabox met één veld waarin de gebruiker een URL kan typen. We hebben al deze functies nodig, de eerste initialiseert gewoon de metabox, de tweede is de metabox-code en de laatste is een functie om de gegevens op te slaan.
OK! Hierna kunnen we doorgaan naar de volgende stap en aan de front-end werken, omdat het back-end klaar is! We voegen de inhoud daarna toe.
Nu zullen we werken om onze portfolio-items te tonen aan de gebruiker! Maar laten we eerst een aantal categorieën maken en vervolgens een aantal items aan de portfolio toevoegen.
In deze tutorial gebruik ik een portfolio-indeling met twee kolommen, met enkele aanpassingen aan markeringen en CSS kunt u veel lay-outs maken!
Een paar tips om een portfolio-item te maken
Ok, het eerste dat we nu moeten doen, is een nieuw maken Paginasjabloon "Portfolio 2-kolommen" genoemd, dus laten we gaan!
Kopieer eerst de page.php het dossier. Wijzig de naam dan naar page_portfolio_2c.php.
We moeten dit nieuwe bestand bewerken en de onderstaande code op de eerste regel van het bestand plakken:
Dit toont een nieuwe optie op het pagina-aanmaakscherm, maar onthoud dat deze code MOET op de eerste regel van het bestand worden geplakt!
Wis nu gewoon alle inhoud binnen content div, in deze tutorial gebruik ik de Twintig elf thema en na het wissen heb ik deze code in mijn bestand:
Als u uw eigen thema gebruikt, wist u alle regels die inhoud van uw pagina ontvangen, zoals bijvoorbeeld the_content (). We zullen een aantal aangepaste code maken, dus laat hier geen andere code achter. Op de portfolio-pagina hebben we alleen uw projecten nodig!
Ga nu naar WordPress Admin en maak een nieuwe pagina met de naam "Portfolio" en vergeet niet "Portfolio 2-kolommen" in het veld Sjabloon te selecteren, zoals de afbeelding hieronder.
Voeg gewoon een titel toe en laat de inhoud leeg, we hebben hem niet nodig.
Als u de pagina nu probeert te openen, krijgt u alleen de koptekst, voettekst en lege inhoud. Dus laten we het leven toevoegen aan ons filterbare portfolio!
Laten we het hebben over de plug-in die we zullen gebruiken om de portfolio te maken.
In deze tutorial maak ik gebruik van een plug-in genaamd Filterable, deze plugin is gemaakt door GetHifi.
Deze plugin is geschreven zonder de compatibiliteitsmodus van jQuery, dus ik heb hem net gewijzigd en de versie die goed werkt met WordPress zit in het broncode-bestand voor deze zelfstudie.
De plug-in is een beetje oud, om precies te zijn, het is van 2009, maar het is ingeschakeld MIT-licentie, zodat u kunt gebruiken op premium-thema's, commerciële sites en waar u maar wilt.
Download gewoon het aangepaste script dat op Broncode staat (link op zelfstudiekop) en laten we beginnen! Als je wilt, ga je naar de startpagina voor meer informatie.
Filterbaar gebruiken is heel eenvoudig! De eerste stap is het gebruik van de juiste markup, de plug-in verwacht markup zoals het onderstaande voorbeeld:
Hier hebben we de filteritems, wanneer we op een van deze links klikken, dan zal alle magie gebeuren. Belangrijk: voor alle items is een klasse met dezelfde tekst nodig in de kenmerken 'href' en 'rel'.
En nu hebben we de opmaak van portfolio-items:
Belangrijk: Wat er echt toe doet, is dat alle items (li) in een (ul) moeten zitten, met andere woorden, moeten worden ingepakt. Merk op dat we een div ook gebruiken we het omdat we het 'zweven' li elementen, dus het is belangrijk om nog een wrapper en een te hebben wis div om structuurbrekende problemen te voorkomen.
Hierna moeten we bellen met filtreerbare script in ons functions.php bestand en initialiseer de filterbare portfolio door het filtreerbare () functie, zoals de onderstaande code:
Maar voor nu voegen we onze aangepaste markup toe aan de li, maar we moeten alle filters en klassenamen genereren met PHP om alle categorieën, portfolio-items en alle andere details van WordPress te krijgen! Laten we werken!
Laten we teruggaan naar de page_portfolio_2c.php bestand en schrijf het portfolio filter. De code is eigenlijk zoiets als de onderstaande code:
We moeten alle termen / categorieën ophalen uit WordPress, een aantal namen bewerken om te gebruiken in het klasseattribuut en een af te drukken ul voor de vereiste sjabloon.
We typen de volgende code in de #content div:
'; echo '
De bovenstaande code genereert een ul met het standaardelement 'Alles' en voer een lus uit op voorwaarden om alle andere categorieën af te drukken heb inzendingen. Laten we een meer gedetailleerde uitleg doen:
Eerst maken we een variabele met de naam $ terms, en we gebruiken de get_terms () functie die een array retourneert met alle termen. Als een parameter vereist de functie een tekenreeks of een reeks tekenreeksen met de naam (namen) van de taxonomie die we doorgeven tagportfolio, dat was de naam die we gebruikten in onze functions.php het dossier. U kunt meer gedetailleerde info krijgen onder get_terms () in de WordPress Codex.
Vervolgens maken we een variabele met de naam $ count en gebruiken we de telling () functie om het totale aantal elementen in de array te krijgen, drukken we de standaard opmaak en de Allemaal item.
Daarna controleren we of de variabele $ count groter is dan nul. Zo ja, dan hebben we ten minste één categorie met items die moeten worden afgedrukt.
Binnenin, maken we een foreach-lus om alle arraywaarden te krijgen en een andere te maken li element voor elk element in de array $ terms.
Binnen foreach creëren we een variabele met de naam $ termname om de term naam op te slaan, onthoud dat we de tekst in kleine letters veranderen, omdat deze variabele binnen het klassenattribuut gebruikt zal worden.
Vervolgens vervangen we elke witruimte door een - de ... gebruiken str_replace functie, kunt u met deze regel categorieën / termen gebruiken met meer dan één woord, bijvoorbeeld 'WordPress Themes'.
En als laatste drukken we een li element en gebruik onze variabelen om de gegevens op de juiste plaats af te drukken.
Als u nu test, ziet u een lijst met categorieën / termen met de namen die u in WordPress Admin hebt gemaakt. Laten we nu aan de items werken.
Laten we nu de portfolio-items weergeven. We moeten dit doen door de vereiste sjabloon hierboven te volgen.
We doen het gewoon door de onderstaande code toe te voegen:
'project', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> naam; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); else: $ tax ="; stop als; ?>
">
">
"target =" _ blank "> Live voorbeeld →"> Meer details →
- Sorry, geen portfolio-items gevonden.
Veel regels code, niet? Maar maak je geen zorgen, ik zal de code voor je uitleggen.
De eerste stap is het maken van een aangepaste zoekopdracht, waarmee we het doen WP_Query-functie, Ik geef als parameter het aangepaste berichttype 'project' door, dat we hebben gemaakt op functions.php het dossier. Met deze query worden alle projecten opgehaald die u heeft gemaakt.
Dan doe ik een lus zoals we normaal doen met een postexpositie bijvoorbeeld.
Binnen de tijd doen we hetzelfde proces als bij het maken van filters, maar hier maken we een array met de naam links waar we alle voorwaarden van de post opslaan. Merk op dat we nu, naast de naam van de taxonomie, de post-ID invoeren in get_the_terms ().
Vervolgens gebruiken we toetreden en maak een unieke string met alle array-elementen, als de berichttermen "WordPress" en "Design" zijn, zal de $ belastingvariabele gelijk zijn aan "wordpress design", we zullen dit gebruiken om de juiste klassen toe te voegen om de portfolio toe te staan filtreerbaar zijn.
Als de post geen voorwaarden bevat, stellen we gewoon in dat $ tax gelijk is aan een lege tekenreeks.Hierna creëren we een variabele met de naam $ info waar we de demo-URL van ons aangepaste berichtveld in de functions.php het dossier
Vervolgens drukken we de sjabloonmarkering af en maken we gebruik van functies zoals get_the_excerpt (), the_post_thumbnail (merk op dat u de dimensies kunt aanpassen aan uw lay-out, als u bijvoorbeeld een portfolio met drie kolommen wilt maken.)
Als u de pagina bijwerkt, ziet u alle vermelde items, maar het filter werkt nog steeds niet. Laten we het oplossen!
Filterable gebruiken in WordPress
Laten we nu onze plug-in gebruiken. Heb je het al gedownload? Zo ja, kopieer en plak het filterable.js bestand in de js / map.
In de functions.php bestand, laten we eerst de jQuery-bibliotheek toevoegen aan de 'head'-tag. Om dit te doen, gebruiken we een aangepaste functie en de wp_enqueue_script functie.
functie enqueue_filterable () wp_register_script ('filterable', get_template_directory_uri (). '/js/filterable.js', array ('jQuery')); wp_enqueue_script ('filterbaar'); add_action ('wp_enqueue_scripts', 'enqueue_filterable');Nu, terug naar de page_portfolio_2c.php bestand en onder de laatste code toegevoegd, maar binnen de inhoud div, voeg de volgende code toe:
Dit verbindt alleen de plug-in met de pagina en roept de filtreerbare () functie om ons portfolio filterbaar te maken.
Volledige code
'; echo 'Allemaal '; if ($ count> 0) foreach ($ terms as $ term) $ termname = strtolower ($ term-> name); $ termname = str_replace (", '-', $ termname); echo ''$ Termijn-> naam.' '; echo "";?> 'project', 'posts_per_page' => -1)); $ count = 0; ?>have_posts ()): $ loop-> the_post (); ?> ID, 'tagportfolio'); if ($ terms &&! is_wp_error ($ terms)): $ links = array (); foreach ($ terms as $ term) $ links [] = $ term-> naam; $ links = str_replace (", '-', $ links); $ tax = join (" ", $ links); else: $ tax ="; stop als; ?>
">
">
"target =" _ blank "> Live voorbeeld →"> Meer details →
- Sorry, geen portfolio-items voor zolang.
Stap 5: Een beetje stijl
Nu we alles hebben gecodeerd wat we nodig hebben, laten we wat CSS toevoegen aan onze style.css bestand, als u andere bestanden hebt, voegt u de code daar gewoon toe.
/ * CLEARFIX ----------------------------------------------- * / .clearboth display: block; marge: 0; opvulling: 0; beiden opschonen; / * PORTFOLIO FILTERSTIJL -------------------------------------------- --- * / # portfolio-filter list-style-type: none; # portfolio-filter li display: inline; opvulling rechts: 10px; # portfolio-filter li a color: # 777; tekstdecoratie: geen; # portfolio-filter li. current, # portfolio-filter li: hover color: # 084a9a; / * PORTFOLIO LIJST STIJL -------------------------------------------- --- * / # portfolio-wrapper padding-bottom: 25px; # portfolio-lijst list-style-type: none; # portfolio-lijst .portfolio-item width: 400px; zweven: links; margin-right: 5px; # portfolio-lijst .portfolio-item h3 a color: # 084a9a; text-transform: hoofdletters; lettertype: vet; # portfolio-lijst .portfolio-item .excerpt text-align: justify; lettergrootte: 14 px; regelhoogte: 18px; opvulling rechts: 15px; margin-bottom: 5px; # portfolio-lijst .portfolio-item .excerpt a color: # 555; # portfolio-lijst .portfolio-item .excerpt a: hover text-decoration: none;Als je nu opnieuw test krijg je een leuk filterbaar portfolio! Wauw, al het werk is gedaan!
Conclusie
En het is klaar! Nu weet je hoe je een verbazingwekkende filterbare portfolio kunt maken met een gratis jQuery-plug-in die je kunt gebruiken in elk werk dat je doet.
!
