Mobiele WordPress-thema's dag 3

Welkom bij het nieuwste deel van Mobile WordPress Theming. Vorige week hebben we de HTML-versie van het WordPress-thema gemaakt dat we in deze zelfstudie gaan maken. Aan het einde van deze zelfstudie hebben we een eenvoudig WordPress-thema dat op elke bestaande WordPress-site kan worden toegepast. Volgende week zullen we het pakket verpakken en afmaken. Laten we er maar op in gaan!

WordPress Theming Mindset

Voor die lezers die niet bekend zijn met het maken van WordPress-thema's, moet je voordat je met het thema begint enkele fundamentele principes begrijpen van hoe WordPress werkt. WordPress is een bloggeraamwerk. Het is ontworpen om de inhoud op de meest flexibele manier aan de gebruiker te leveren. WordPress slaat uw inhoud op en geeft u de tools om het te dienen zoals u dat wilt. Door de gegevens die WordPress-services bevatten te 'villen', een proces dat ook wel 'thema's' wordt genoemd, kunt u het uiterlijk van uw blog onderscheiden. Wanneer u een WordPress-site wilt wijzigen of verbeteren, moet u een plug-in schrijven of een thema maken. Plug-ins zijn geschikt als u de basisfunctionaliteit van WordPress wijzigt of toevoegt. Als u echter de stijl van WordPresss wilt wijzigen, kunt u een thema bewerken of maken. Bewerk kerncode van WordPress niet alleen rechtstreeks. Dit zal waarschijnlijk WordPress verknoeien, vooral als je de versies later moet updaten.

Naked starten

Tenzij je extreem innovatief en uniek bent, delen bijna alle WordPress-thema's dezelfde basis. Ze hebben allemaal een header, een body, een footer, een basisstyling enz. Nodig. Dat gezegd hebbende, in plaats van het wiel opnieuw uit te vinden, zullen we een 'naakt thema' gebruiken. Zoals de naam al doet vermoeden, is een naakt thema de meest barebone die mogelijk is. Over het algemeen is er een heel kleine styling naast resets en af en toe een bruikbaar fragment dat u waarschijnlijk in uw project zult gebruiken. Er zijn tal van variëteiten van naakte thema's op het net. Dus, afhankelijk van het project, zou je een andere kunnen kiezen. Er is geen beste naakte thema. Voor dit project heb ik besloten om WordPress-naakt te gebruiken. U kunt een exemplaar nemen op hun Google Code-pagina. Voor een grote verzameling naakte thema's kun je ook het artikel van speckboy.com bezoeken.

Installeren van WordPress

Nu hebben we een WordPress-installatie nodig om te thematiseren. Je kunt er een op je server installeren als je die hebt, of hem lokaal installeren.

Server

Als u lokaal installeert, zorg er dan voor dat u over een lokale testserver beschikt. Voor Windows zijn WAMP of EasyPHP goede keuzes. Als je op Linux zit, bekijk dan XAMP. Als je op een Mac werkt, bekijk dan MAMP. Voor deze zelfstudie gebruiken we MAMP.

WordPress

Ga gewoon naar WordPress.org om de nieuwste versie van WordPress te downloaden.

Installeer WordPress op de server

Kopieer de WordPress-map naar uw serverdirectory en installeer. Dit is geen tutorial over het installeren van WordPress. Er zijn veel tutorials die dat nu al doen.

Nadat u WordPress hebt geïnstalleerd, kopieert u de naakte themamap naar de wp-content / themes directory. Meld u vervolgens aan bij WordPress, ga naar Uiterlijk> Thema's en selecteer de naakte hen.

"Kleedt het thema"

Nu we het thema actief hebben, kunnen we het wijzigen en meteen bekijken. Wijzig eerst de thema-informatie die zich in de top van style.css bevindt. Hier verklaar je de naam van het thema, de auteur, etc. In dit geval heb ik het als volgt gewijzigd:

 / ** Theme Name: MyTouch Theme URI: http://www.connorzwick.com Versie: .9 Auteur: Connor Zwick Auteur URI: http://www.connorzwick.com Labels: simple, mobile, jqtouch, ajax Licentie: GPL Beschrijving: Een thema gemaakt met het oog op de felixibiliteit. Hiermee kan iedereen kiezen als mobiel thema. * /

hoofd

WordPress kijkt eerst naar het index.php-bestand in de themamap. Dit bestand is hoe de rest van de themabestanden worden opgenomen. Als je ernaar kijkt, zie je dat het eerst alle inhoud uit de koptekst pakt. Dat is waar we moeten beginnen. Begin met het verwijderen van alles, van het Doctype tot het tag en plakken in het volgende:

     <?php if(is_home()) bloginfo('name'); else wp_title("); ?>

Dit wordt rechtstreeks uit het hoofd gekopieerd van wat we vorige week hebben gedaan, behalve twee dingen. U zult merken dat eventuele links naar JS-, CSS- of afbeeldingsbestanden zijn toegevoegd aan het PHP-fragment van de sjabloon-URL. Dit is een WordPress-functie die de URL van het sjabloonbestand zal echoën. Dit helpt ons eventuele problemen met het koppelen aan statische bestanden op te lossen, omdat we er nu dynamisch aan gekoppeld zijn. Ten tweede zul je merken dat we een stylesheet hebben gekoppeld in plaats van al onze styling rechtstreeks in onze header te plaatsen. Dit is alleen maar ter wille van de netheid. Dat gezegd hebbende, als u zelf bestanden volgt, zorg er dan voor dat u de styling kopieert en plakt in style.css

Zoals u kunt zien, heeft jQTouch al zijn magie bewerkt door alleen de koptekstkoppelingen toe te voegen.

styling

Zoals eerder vermeld, hebben we alle styling in een stylesheet gedumpt. We kunnen ook de presets verwijderen die bij het naakte thema hoorden. Wanneer alles is gezegd en gedaan, zou het stylesheet er ongeveer zo uit moeten zien:

 / ** Theme Name: MyTouch Theme URI: http://www.connorzwick.com Versie: .9 Auteur: Connor Zwick Auteur URI: http://www.connorzwick.com Labels: simple, mobile, jqtouch, ajax Licentie: GPL Beschrijving: Een thema gemaakt met het oog op de felixibiliteit. Hiermee kan iedereen kiezen als mobiel thema. * / body.fullscreen #home .info display: geen;  #over opvulling: 100px 10px 40px; text-shadow: rgba (255, 255, 255, 0.3) 0px -1px 0; lettergrootte: 13px; text-align: center; achtergrond: # 161618;  # over p margin-bottom: 8px;  # over een color: #fff; lettertype: vet; tekstdecoratie: geen;  / * Begin met aanpassen hier * / .blog-title border-bottom: 1px solid # 333333;  span.blog-title color: #fff; breedte: 100%; weergave: blok; padding-bottom: 10px;  .post-description, .post-auteur font-size: 12px; marge links: 75 px;  .post-description min-height: 75px;  .post-auteur margin-bottom: 3px;  .post, .page-auteur font-size: 13px; kleur: #fff; margin-bottom: 5px;  #blog .rounded li position: relative;  .month positie: absoluut; breedte: 70 px; text-align: center; achtergrond: # aa3939; kleur: # f5f2f2; regelhoogte: 28 px; padding-bottom: 5px; border-top-left-radius: 4px; border-top-right-radius: 4px;  .date positie: absoluut; breedte: 70 px; margin-top: 25px; lettertypegrootte: 40px; text-align: center; achtergrond: # f5f2f2; grens-onder-links radius: 4px; border-bottom-right-radius: 4px;

Dit is bijna precies wat we vorige week hebben gemaakt. We zullen hier styling toevoegen als we verdere aanpassingen nodig hebben.

index.php

Nogmaals, index.php is het bestand dat de rest van de themabestanden bevat. Dus eerst moeten we het header.php-bestand bellen. Het is vrij eenvoudig:

Nu kunnen we de fragmenten van vorige week opnieuw plakken. We zullen beginnen met het lichaam:

    WordPress-site
 Wat betreft

We stopten voor het blogmenu-item met een reden. We willen niet dat het blogitem een optie is als we geen berichten hebben, dus we moeten hier nog wat meer WordPress PHP introduceren:

  Blog artikelen 12

Kortom, we controleren of we berichten hebben met de have_posts () functie, en als we dat doen, tonen we het menu-item. Als we dat niet doen, geven we niets weer. We zouden waarschijnlijk weg kunnen komen met het weglaten van de else-tag, maar ik wil laten zien dat als je iets wilde plaatsen zoals "Geen blogposts nu" je dat wel zou kunnen. Dan beëindigen we gewoon de IF-verklaring

Nu kunnen we meer van de inhoud van vorige week plakken:

 Pages 2
  Externe links
  abonneren
 tjilpen
 Desktoppagina
 
  E-mail
 schenken
 
  Voeg deze pagina toe aan uw startscherm om het aangepaste pictogram, het opstartscherm en de modus Volledig scherm te bekijken.

Mobiel thema
Versie 0.1 bèta
Van Connor Zwick

Duw uw inhoud over meer grenzen naar alle op het internet aangesloten mobiele apparaten
met behulp van de wereldberoemde WordPress CMS en JQTouch.

@connorzwick op Twitter

Dichtbij

Site-pagina's

Huis

Pages

Wat betreft
Geschiedenis

We zijn opnieuw gestopt omdat we deze week nog iets toevoegen. Vorige week demonstreerden we de AJAX-mogelijkheden van jQTouch door het blog.html te pakken en het te laden. Nu we echter integreren met WordPress, is het veel eenvoudiger om alleen een ankertag met dezelfde pagina te gebruiken. Dus hebben we het bloggedeelte geïntegreerd in de index.php-pagina.

Wat we gaan doen is eerst controleren of we weer berichten hebben. Vervolgens zullen we een while-lus starten en een ongeordend lijstitem voor elk blogitem maken. In deze loop kun je zien dat we wat meer WordPress-sjabloonfuncties hebben gebruikt. Ze zijn allemaal behoorlijk duidelijk. Voor die tijd is M een snelkoppeling voor een afkorting van drie letters van de maand, en geeft j het dagnummer weer zonder de voorloop 0 (d.w.z. 9 niet 09).

   blog
 Huis 
  Dit is een korte beschrijving van blog. Hier beschrijf je het doel. 
     ">
 
 
 Door: 
 Lees verder')); ?>

Dan de rest van de pagina:

   Site-pagina's
 Huis 
 Pages
  Wat betreft
 Geschiedenis
 
 
   Site-pagina's
 Huis 
  Titel plaatsen
 Door: Connor Zwick
 Dit is een korte beschrijving. Hier zal een kort uittreksel van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen. Dit is een korte beschrijving. Hier zal een kort uittreksel van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen. Dit is een korte beschrijving. Hier zal een kort fragment van de post zijn, voor de kijker om te beoordelen of hij of zij meer wil lezen.

Aan het einde voegen we een voettekstbestand toe. Voor dit thema wordt het voettekstbestand niet gebruikt, dus we hebben het echt niet nodig. Maar ik laat het thema open, zodat we het toch opnemen. Voor dit thema willen we alleen het tag erin.

PHP P uit inhoud verwijderen

Zoals je misschien hebt gemerkt. De uittreksel-tekst voor de blogartikelen is groter dan zou moeten zijn. De reden hiervoor is dat we de functie_content () hebben gebruikt, die het fragment in een extra p-tag verpakt. Hoe lossen we dit op? We moeten één regel toevoegen aan de bovenkant van het index.php-bestand:

Afronden

Nu ziet alles er goed uit. Maar er zijn nog steeds veel dingen die moeten worden behandeld, zoals individuele berichten, zoeken, paginering en opmerkingen voordat dit een compleet en nuttig thema is! Ik hoop dat je veel hebt geleerd en zorg ervoor dat je de laatste post in deze serie volgende week bekijkt!

Code