Indhold
- Oprettelse af en ny tilpasset posttype
- Oprettelse af arkivsiden
- Oprettelse af den enkelte side
- Afslutningsvis
Webudvikling kan ændre sig hurtigt, men to ting, der er kommet for at blive, er WordPress og responsivt design. At vide, hvordan man opbygger lydhøre WordPress-temaer og plug-ins, er et must.I denne vejledning ser vi på at opbygge en WordPress-plugin og temaskabelon til en lydhør portefølje.
Vi arbejder med to mocked-up-skabeloner: en arkivside, der viser alle de seneste projekter og en enkelt side, der viser et specifikt projekt. Arkivsiden til porteføljen er ret enkel med en overskrift og tre søjler af projekter i fuld bredde. Dette krymper til to kolonner, derefter en kolonne, når skærmen bliver mindre. HTML og CSS er tilgængelig på GitHub. Hvert projekt på siden har denne struktur.
Se en eksklusiv screencast af denne tutorial:
Dette er den HTML, der genereres af WordPress Loop:
div> img src = "project.png"> h3> Navn på websted / h3> p> Kort beskrivelse og et link a href = "#"> læs mere ... / a> / p> / div>
Den enkelte side vil have et lignende layout og indpakke al teksten i en kaldet container .projekt i stedet for .kort. CSS vil også være ret let og skaleret. Du bemærker muligvis også i webstedets filer, at der er en style.scss fil. Jeg har udviklet hele CSS ved hjælp af Sass, men frygt ikke: den genererede style.css er samlet på en læsbar måde.
Oprettelse af en ny tilpasset posttype
En brugerdefineret posttype er et objekt i WordPress, der giver os mulighed for at tilføje alle typer indhold, vi ønsker, til WordPress-editoren og behandle dem på samme måde som indlæg. I en ny WordPress-installation er der menupunkter for indlæg og sider. Disse betragtes begge som posttyper, der håndterer indhold forskelligt. Med brugerdefinerede posttyper kan vi tilføje muligheder for at oprette nye typer indhold til WordPress-admin-menuen. Vi opretter en tilpasset posttype kaldet portefølje.
Vi vil udvikle denne tilpassede posttype som en del af et større WordPress-plug-in til porteføljeprojekter. Mens vi kunne tilføje funktionaliteten til temaet, er dette dårlig praksis, for så er vores indhold bundet til vores design: hvis vi ændrer temaet, mister vi porteføljen. Vi håndterer visning gennem to metoder: skabeloner / skabelontags og kortkoder, der kan bruges gennem editoren.
Det første trin er at definere plug-in. Opret en mappe i / wp-content / plugins / og navngiv det hvad du vil. Jeg har navngivet min / jlc-projekter /. Opret en fil med samme navn inde i den mappe (f.eks. jlc-projects.php) og tilføj denne kode:
? php / * Plugin Navn: Joe's Portfolio Plugin Plugin URI: https://github.com/jcasabona/wp-portfolio Beskrivelse: Et simpelt plugin, der opretter og viser en projektportefølje med WordPress ved hjælp af brugerdefinerede posttyper! Forfatter: Joe Casabona Version: 1.0 Forfatter URI: http://www.casabona.org * / define (’JLC_PATH’, WP_PLUGIN_URL. ’/’. Plugin_basename (dirname (__ FILE__)). ’/’); definer ('JLC_NAME', "Joe's Portfolio Plugin"); require_once ('jlc-project-cpt.php'); ?> var13 ->
Der foregår et par ting her. Den første er standard-plug-in-definitionen til en WordPress-plug-in; de næste par linjer opretter konstanter og inkluderer derefter filerne, som resten af plug-in har brug for. På dette tidspunkt er der kun en anden fil: jlc-projekt-cpt.php.
Du vil også bemærke, at jeg bruger præfikset JLC_ (eller jlc-) til alt. Du skal vælge dit eget præfiks, du vil bruge. Forudindstillingsvariabler og funktionsnavne mindsker chancen for, at dit plug-in er i modstrid med andre temaer eller plug-ins.
Før vi hopper ind jlc-projekt-cpt.php, Jeg vil tilføje endnu en smule kode til jlc-projects.php. Koden nedenfor opretter en ny billedstørrelse, som vi vil bruge sammen med vores tilpassede posttype:
hvis (function_exists ('add_theme_support')) {add_theme_support ('post-thumbnails'); add_image_size ('jlc_project', 1100, 640, true); }
Nu er det tid til at oprette jlc-projekt-cpt.php. Jeg diskuterer kun den vigtige kode her, men du kan finde den komplette kode i GitHub repo. Først (efter åbningen ? php tag) definerer vi den tilpassede posttype:
add_action ('init', 'jlc_projects_register'); funktion jlc_projects_register () {$ args = array ('label' => __ ('Portfolio'), 'singular_label' => __ ('Project'), 'public' => true, 'show_ui' => true, 'capability_type '=>' post ',' hierarchical '=> true,' has_archive '=> true,' supports '=> array (' title ',' editor ',' thumbnail '),' rewrite '=> array (' slug '=>' portfolio ',' with_front '=> false)); register_post_type ('portfolio', $ args); register_taxonomy ("jlc-project-type", array ("portfolio"), array ("hierarchical" => true, "label" => "Project Type", "singular_label" => "Project Type", "rewrite" = > sandt)); }
Dette er din standard definitionsfunktion for brugerdefinerede posttyper. Vi tilføjer en handling for at kalde den på init og derefter sende vores liste over argumenter til register_post_type ()sammen med typens slug, som vil være 'portefølje'. Efter registrering af posttypen registrerer vi den brugerdefinerede taksonomi for at følge med posttypen. Det er vigtigt at holde disse to funktioner sammen. Hvis du ikke gør det, og taksonomien på en eller anden måde bliver registreret først, kaster WordPress en fejl.
Når den tilpassede posttype er defineret, er det tid til at tilføje de brugerdefinerede metadata, vi vil bruge. Vores brugerdefinerede posttype understøtter en titel, editoren (som fungerer som brødteksten) og en miniaturebillede, hvor det viste billede vil gå. Der er en ting mere, som jeg gerne vil føje til mine porteføljestykker: en URL til det websted, jeg viser. Først opretter vi den funktion, der tilføjer dette felt i administratoren:
add_action ("admin_init", "jlc_projects_admin_init"); funktion jlc_projects_admin_init () {add_meta_box ("jlc-projects-meta", __ ("Project Link"), "jlc_projects_options", "portfolio", "side", "low"); } funktion jlc_projects_options () {global $ post; hvis (defineret ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnerer $ post_id; $ custom = get_post_custom ($ post-> ID); $ link = $ custom ["jlc_projects_link"] [0]; ?> var13 -> input navn = "jlc_projects_link" placeholder = "http: //" value = "? php echo $ link;?> var13 ->" />? php}
Disse funktioner er ret ligetil. Når administratoren startes (dvs. indlæst), kalder vi en funktion kaldet jlc_projects_admin_init () der opretter en ny metafelt til porteføljeposter. For at generere dette felt, en ny funktion, jlc_projects_options (), Hedder.
En gang inde i muligheder funktion, griber vi simpelthen link værdi, som vi har kaldt jlc_projects_link, og udskriv det. Men først vil vi sørge for, at en autosave ikke udføres. Hvis det er tilfældet, mister vi sandsynligvis data. Derefter skal vi faktisk gemme metadataene, når indlægget er gemt:
add_action ('save_post', 'jlc_projects_save'); funktion jlc_projects_save () {global $ post; hvis (defineret ('DOING_AUTOSAVE') && DOING_AUTOSAVE) {returner $ post_id; } andet {update_post_meta ($ post-> ID, "jlc_projects_link", $ _POST ["jlc_projects_link"]); }}
Med administrationsafsnittet for vores tilpassede posttyper oprettet, er det tid til at tilføje nogle frontend-funktioner for at hjælpe med at vise vores projekter for besøgende. Denne består af en arkivskabelon, en enkelt sideskabelon og en kortkode (ikke dækket af denne vejledning). Men inden vi gør det, er der en anden funktion, som vi opretter til visning af billeder: picturefill.js.
Dette stykke JavaScript (du kan finde GitHub repo her) giver dig mulighed for at definere et sæt medieforespørgsler for at skifte et billede til en version, der er venligere i forhold til størrelsen på den skærm, det vises på. Dette har også konsekvenser for indlæsningstid, da du sandsynligvis kan antage, at en mindre skærm betyder en mobil enhed, der bruger 4G, 3G eller endda EDGE. Jeg ved, at det ikke altid er tilfældet, men det er bedre end ingenting.
Du kan se markeringsmønsteret for et standard billedudfyldningselement på GitHub-repoen. Vi kan have et ubegrænset antal span> elementer for hver størrelse af det billede, vi har. Der er også et tilbagefald for brugere uden JavaScript. Som du kan forestille dig, da WordPress opretter flere versioner af hvert billede, vi uploader ved hjælp af Media Uploader, egner det sig pænt til picturefill.js. Den første ting, vi skal gøre, er at indlæse scriptet, som er placeret i / js / mappe i vores plug-in-bibliotek. Vi tilføjer følgende kode til jlc-projects.php:
funktion jlc_projects_scripts () {wp_enqueue_script ('picturefill', JLCP_PATH.'js / picturefill.js ', array ()); } add_action ('wp_enqueue_scripts', 'jlc_projects_scripts');
Dette indlæser vores JavaScript med de scripts, der indlæses af andre plug-ins. Det vil også sikre, at vi ikke indlæser picturefill.js mere end én gang.
Da vores projekter bruger sektionen med fremhævede billeder til at vise skærmbilledet, kan vi erstatte standardmarkeringen med fremhævet billede ved hjælp af post_thumbnail_html filter. Bemærk, at denne funktion faktisk vil erstatte alle fremhævede billedsektioner på webstedet. Hvis dette kan forårsage en konflikt (det sandsynligvis vil), skal du tilføje nogle betingelser til dit plug-in for at sikre, at dette filter kun bruges på porteføljesider.
add_filter ('post_thumbnail_html', 'jlc_projects_get_featured_image'); funktion jlc_projects_get_featured_image ($ html, $ aid = false) {$ sizes = array (‚'thumbnail', 'medium', 'large', 'jlc_project', 'full'); $ img = ’span data-picture data-alt =" ’. get_the_title ().’ ">’; $ ct = 0; $ hjælp = (! $ hjælp)? get_post_thumbnail_id (): $ hjælp; foreach ($ størrelser som $ størrelse) {$ url = wp_get_attachment_image_src ($ hjælp, $ størrelse); $ bredde = ($ ct sizeof ($ størrelser) -1)? ($ url [1] * 0.66): ($ bredde / 0.66) +25; $ img. = ’span data-src =" ’. $ url [0].’ "’; $ img. = ($ ct> 0)? ’Data-media =" (min-bredde: ’. $ Bredde .’px)"> / span> ’:’> / span> ’; $ ct ++; } $ url = wp_get_attachment_image_src ($ hjælp, $ størrelser [1]); $ img. = ’noscript> img src =" ’. $ url [0].’ "alt =" ’. get_the_title ().’ "> / noscript> / span>’; returner $ img; }
Der foregår et par ting her. Den første er, at funktionen har en matrix med alle de billedstørrelser i WordPress, som vi vil bruge. Hvis du har defineret dine egne størrelser, skal du tilføje dem her. Dette er, så billedudfyldningselementet er nøjagtigt udfyldt. Efter nogle opsætninger (definerer billedstørrelser, åbner billedudfyldningselementet, initialiserer en tæller) bevæger det sig gennem $ størrelser, udskriver en billedindgang for hver.
For hver post, wp_get_attachment_image_src () kaldes til at få fat i billedets URL baseret på billedets ID (hvilket get_post_thumbnail_id () returnerer baseret på post-ID) og størrelsen. wp_get_attachment_ image_src () returnerer en matrix, der inkluderer billedet, bredden, højden, og om det er beskåret eller ej. Der foregår også lidt matematik her for at beregne, hvornår pausepunkterne skal bestemmes, samt hvordan man skal håndtere miniaturebilledet. Jeg vil ikke diskutere dette detaljeret her, men det er værd at bemærke, at dette er et vigtigt problem at løse, og et, som løsninger udvikler sig hurtigt for.
Nu hver gang vi får postens miniaturebillede, kommer den returnerede HTML fra vores funktion.
Oprettelse af arkivsiden
Dernæst opretter vi arkivskabelonen til den nye Custom Post Type. Dette vises som standard og fungerer som vores vigtigste porteføljeside.
(Bemærk: vi opretter ikke webstedets startside i denne selvstudie, men det kræver enten et skabelontag eller en kortkode, der udfører en brugerdefineret løkke ved hjælp af WP_Query.)
Opret en ny fil i det temakatalog, du bruger, og kald den arkiv-portfolio.php. WordPress's skabelonhierarki er smart nok til at vide, at når en bruger er på porteføljesiden, skal den vise indholdet ved hjælp af denne skabelon. Min anbefaling på dette tidspunkt er at kopiere page.php skabelon til denne skabelon. Vi erstatter simpelthen Loop-delen.
Jeg anbefaler, at du bruger en skabelon uden sidebjælke eller en skabelon med en enkelt kolonne. CSS, der henvises til her, fungerer lidt pænere. Sådan ser vores løkke ud:
? php while (have_posts ()): the_post (); ?> var13 -> div>? php the_post_thumbnail (’jlc_project’); ?> var13 -> h3>? php the_title (); ?> var13 -> / h3> p>? php echo get_the_excerpt (); ?> var13 -> a href = "? php the_permalink ();?> var13 ->"> læs mere ... / a> / p> / div>? php endwhile; ?> var13 ->
Dette skal være ret ligetil. Fordi vi erstatter standard HTML for the_post_thumbnail (), argumentet for hvilket billede der skal bruges, betyder ikke noget, fordi alle størrelser returneres ved hjælp af markering af picturefill.js. Jeg valgte at bruge get_the_excerpt () for at udelukke enhver markering inkluderet af the_excerpt ().
Når du designer et plug-in, der inkluderer noget CSS, er det vigtigt at gøre det så minimalt som muligt, så det ikke rammer hovederne med temaets CSS eller giver brugeren mulighed for at udelukke din CSS fuldstændigt. Da vi opretter skabeloner inden for temaet, har vi lidt mere vrirum. Her er en del af den (Sass-genererede) CSS, som jeg har tilføjet til hvert projekt på arkivsiden:
.card img {display: block; margen: 0 auto; } @media-skærm og (min. bredde: 45.88em) {.card {display: inline-block; bredde: 40%; }} @media skærm og (min bredde: 54,62 em) {. kort {bredde: 44%; }} @media skærm og (min bredde: 76.38em) {.kort {bredde: 29%; }} @media skærm og (min bredde: 99.4em) {.kort {bredde: 30%; }
Jeg har bestemt, hvilke breakpoints der var bedst til at placere projektkortene side om side. Jeg har også lavet det fremhævede billedcenter automatisk.
Oprettelse af den enkelte side
Nu opretter vi den enkelte skabelon til porteføljeprojekter. Hver gang en bruger besøger et enkelt projekts side, vises det her. Opret en ny fil i dit tema, kald den single-portfolio.php og kopier en anden skabelon for at indsætte derinde (jeg vil anbefale det, du brugte til arkiv-portfolio.php). Denne gang erstatter vi sløjfen med denne kode:
? php while (have_posts ()): the_post (); ?> var13 -> h2>? php the_title (); ?> var13 -> / h2>? php the_post_thumbnail (’jlc_project’); ?> var13 ->? php the_content ('Læs resten af denne post'); ?> var13 ->? php hvis (funktion_eksisterer (’jlc_projects_get_link’)) {$ jlc_link = jlc_projects_get_link ($ post-> ID); hvis ($ jlc_link) {?> var13 -> a href = "? php print $ jlc_link;?> var13 ->"> Besøg webstedet / a>? php}}?> var13 ->? php endwhile; ?> var13 ->
Dette ligner arkivskabelonen, men vi kalder en ekstra funktion her: jlc_projects_get_link (). Vi tilføjer dette til vores plug-in, og det returnerer URL'en til det aktuelle projekt.
Hvis der ikke er nogen URL, skal false returneres, og der vises ingen knap. Her er hvad funktionen (findes i jlc-projects.php) ligner:
funktion jlc_projects_get_link ($ id) {$ url = get_post_custom_values ('jlc_projects_link', $ pid); returnere ($ url [0]! = ’’)? $ url [0]: false; }
CSS for denne side afhænger stort set af temaet: Jeg har brugt noget CSS til at generere en pæn knap. Sørg for, at uanset hvilken CSS du opretter selv ikke forstyrrer hovedtemaet.
Afslutningsvis
Nu har vi oprettet et plug-in for at tilføje en ny tilpasset posttype til porteføljer, integreret picturefill.js til at håndtere billeder bedre og oprettet to temaskabeloner til at vise informationen.
GitHub-repoen til vejledningen indeholder al den kode, der vises her, plus det tema, jeg brugte, en kortkode og et skabelonmærke.
Ord: Joe Casabona
Denne artikel opstod oprindeligt i netmagasin nummer 254.
