Share
Responsief ontwerp wordt langzaam maar zeker een verwachte norm voor webontwikkelaars. Deze tutorial laat je zien hoe je een responsief framework kunt toevoegen aan je volgende WordPress-thema.
Vroeger hoefde je je alleen zorgen te maken over de consistentie van websites in meerdere browsers, maar nu moeten we naar het grotere geheel kijken - consistentie op meerdere apparaten. De computer was vroeger onze enige toegang tot internet, maar nu springen we online van onze telefoons, tv's, tablets en wie weet wat er nog meer in de pijplijn zal komen. Het hebben van uw website op de juiste wijze renderen en uitvoeren op elk apparaat zou dit jaar een topprioriteit moeten zijn.
Bij responsief ontwerp gaat het erom dingen vloeiend te maken en aan te passen aan de schermgrootte. Hoewel WordPress niet altijd leuk speelt met responsieve ontwerpmethoden, zijn er manieren om dit te bereiken. Hoe responsief u besluit uw website te maken, is in feite hoeveel tijd u eraan wilt besteden.
Er zijn verschillende responsieve frameworks om uit te kiezen. Misschien wilt u wat tijd besteden aan het onderzoeken van elk exemplaar om te bepalen welke functies het project nodig heeft. Als u niet zeker weet waar u moet beginnen, zijn hier een paar te overwegen:
Bootstrap van Twitter is gebouwd op een responsieve 12 kolomraster. Het heeft vaste en vloeistof-breedte lay-outs op basis van dat systeem. Het wordt ook geleverd met ondersteuning voor optionele JavaScript-invoegtoepassingen, zoals een afbeeldingscarrousel, Typeahead, uitwisselbare tabbladen en nog veel meer.
Less Framework is gebaseerd op 4 lay-outs en 3 sets van typografische presets. Less Framework gebruikt een standaardlay-out als beginpunt en gebruikt vervolgens CSS3-mediaquery's om 'kinderlay-outs' te coderen.
Stichting is een rastersysteem op basis van 12 kolommen die geen vaste breedte hebben; ze kunnen variëren op basis van de resolutie van het scherm of de grootte van het venster. Foundation is voorverpakt met knoppen en gebouwd in formulierstijlen, waarschuwingen en meer.
YAML is een lay-out met meerdere kolommen gebaseerd op een rastersysteem met percentagebreedten. Het wordt geleverd met verschillende ingebouwde functies en ondersteunt verschillende jQuery-plug-ins, zoals Toegankelijke tabbladen en SyncHeight.
Deze lijst met frameworks is niet compleet, maar in het belang van deze tutorial laat ik je zien hoe je Foundation kunt opnemen in je volgende WordPress-thema.
Om te beginnen, download Stichting en voeg de bestanden toe aan uw css en js mappen in de directory van uw thema. De gemakkelijkste manier om de vereiste bestanden toe te voegen aan uw thema zou zijn om te gebruiken wp_enqueue_script en wp_enqueue_style.
Voor deze tutorial ga ik je laten zien wat je in je plaatst functions.php bestand om Foundation direct te laten werken, maar voor meer informatie over het toevoegen van bestanden op deze manier, bekijk de tutorial over hoe je JavaScript en CSS in je thema kunt opnemen.
Als u het benodigde JavaScript wilt toevoegen zodat Foundation goed kan werken in uw thema, moet u een functie maken die het wp_enqueue_script om hen te dienen.
Accentsconagua
function responsive_scripts_basic () // registreer scripts voor ons thema wp_register_script ('foundation-mod', get_template_directory_uri (). '/js/modernizr.foundation.js', array ('jquery'), true); wp_register_script ('foundation-main', get_template_directory_uri (). '/js/foundation.js', true); wp_register_script ('foundation-app', get_template_directory_uri (). '/js/app.js', true); wp_enqueue_script ('foundation-mod'); wp_enqueue_script ('foundation-main'); wp_enqueue_script ('foundation-app'); add_action ('wp_enqueue_scripts', 'responsive_scripts_basic', 5); Voeg vervolgens de Foundation-stylesheets toe om het rooster flexibel te maken. Plak deze functie na de functie die u zojuist hebt gemaakt.
function responsive_styles () // stijlen registreren voor ons thema wp_register_style ('foundation-style', get_template_directory_uri (). '/css/foundation.css', array (), 'all'); wp_register_style ('foundation-appstyle', get_template_directory_uri (). '/css/app.css', array (), 'all'); wp_enqueue_style ('foundation-style'); wp_enqueue_style ('foundation-appstyle'); add_action ('wp_enqueue_scripts', 'responsive_styles'); Eenmaal opgeslagen, gaat u terug en controleert u uw broncode om te controleren of uw bestanden correct zijn toegevoegd. Het zou er ongeveer zo uit moeten zien:
Iedereen houdt ervan om die extra stap te zetten om dingen in Internet Explorer te laten werken toch? Om ervoor te zorgen dat uw Foundation-framework responsief blijft in Internet Explorer, moet u enkele voorwaardelijke verklaringen toevoegen. Deze moeten in uw header.php-bestand worden geplaatst vóór de tag met het afsluitende hoofd.
>
Nu uw thema de setup van de Foundation heeft, kunt u gebruik maken van alle responsieve functies die u moet ontwerpen met behulp van het Foundation-rastersysteem. Net als andere reactieve frameworks, is het een systeem dat bestaat uit 12 kolommen. Andere inbegrepen functies zijn vooraf ingestelde knopstijlen, tabbladen, tabellen en nog veel meer. Bekijk de documentatie van de Foundation om alle toeters en bellen te bekijken en instructies voor het werken met het raster.
Er zijn tal van gratis en premium WordPress-thema's beschikbaar die gebruik maken van responsief ontwerp. Als u liever met iets uit de doos begint, kunt u deze thema's uitproberen:
WordPress Bootstrap is een thema ontwikkeld op Twitter's Bootstrap v.2.0.1. Het is volledig responsive met vier verschillende paginasjablonen om uit te kiezen, shortcodes en meerdere zijbalkopties. Na de installatie kunt u bootswatch.com bekijken om verschillende kleurenversies van het thema te downloaden.
Op basis van het Themify-framework gebruikt iTheme2 mediaquery's om verschillende schermen te targeten, wordt een aanpasbare schuifregelaar voor functies, een widget voor sociale media, twee verschillende thema-skins geleverd en kunt u maximaal vier footer-widgets gebruiken.
Het Responsive Twenty Ten-thema ondersteunt flexibele afbeeldingen, marges en mobiele afbeeldingen. Het is gemaakt als een kinderthema voor het meegeleverde Twenty Ten-thema.
Good Minimal is een schone, minimalistische responsieve lay-out die zich aanpast aan een veelvoud aan schermen en apparaten. Good Minimal wordt geleverd met twee verschillende stijlen, ondersteunt onbeperkte aangepaste zijbalken, shortcodes, meerdere vervolgkeuzemenu's en verschillende andere functies.
Modulo is een responsieve, vloeiende lay-out, met ondersteuning voor google-lettertypen, shortcodes, meerdere schuifregelaars, sjablonen voor portfolio-pagina's en kleuraanpassing. Modulo wordt ook geleverd met 5 aangepaste widgets, waaronder een voor recente berichten met miniatuurondersteuning.
Responsive design blijft groeien in populariteit en weten hoe je het kunt gebruiken binnen je toekomstige thema-constructie is cruciaal voor succes. Of u nu een kader aan uw thema toevoegt of een vooraf gebouwd thema gebruikt dat responsief ontwerp ondersteunt, uw klanten gaan naar verwachting meerdere apparaatondersteuning als een basisdienst.
Zijn thema's die u maakt responsief? Gebruik je een responsief kader dat we niet genoemd hebben? Vertel ons alles over de opmerkingen hieronder!
Als u hulp nodig heeft bij het maken van een responsief WordPress-siteontwerp, kunt u een van de eenvoudige, voordelige WordPress-services bestellen bij Envato Studio. Deze deskundige providers nemen uw ontwerp snel en probleemloos om naar een responsieve WordPress-site!
