Voor degenen die net begonnen kennis te maken met CMS Joomla u wilt altijd het uiterlijk van de site naar eigen inzicht wijzigen. Het standaardsjabloon past niet meer bij u en u wilt iets nieuws.
Velen beginnen te zoeken gratis sjablonen en installeer ze op uw site, maar na verloop van tijd beginnen ze te beseffen dat de nieuwe sjablonen hun gebreken hebben en dat er niet genoeg vaardigheden zijn om ze te repareren. Dat is waarom voordat u doorgaat met het installeren van nieuwe sjablonen ik sterk Ik raad aan om te leren hoe je ze kunt wijzigen, want in de toekomst zal het zeker van pas komen.
In deze zelfstudie laat ik u zien hoe u de koptekst voor onze site kunt bewerken met behulp van de standaard Protostar-sjabloon als voorbeeld. Wat hebben we hiervoor nodig:
- FTP-client, bijvoorbeeld FileZilla voor gemakkelijke toegang tot bestanden op de server van de hostingprovider (voor degenen die de site op de hosting hebben)
- Teksteditor (kladblok ++, sublieme tekst enzovoort.)
- Grafische editor (bijvoorbeeld Photoshop)
- webbrowser (Google chrome, Firefox, enz.)
Natuurlijk kun je ze missen (met uitzondering van de internetbrowser), maar deze programma's zullen het werk aanzienlijk vereenvoudigen.
Leren werken met stijlbestanden in Joomla
De eerste stap is om te leren hoe u de internetbrowser "correct" gebruikt, met andere woorden, leer hoe u de paginacode kunt bekijken en de regels kunt markeren die nodig zijn voor het werk.
Om de paginacode te bekijken: v verschillende browsers er is speciale teams, maar in de meeste gevallen wordt hiervoor de sleutel gebruikt. F12... In browsers zoals Google Chrome, om de code van een bepaald deel van de pagina te bekijken, kun je poke klik met de rechtermuisknop muis op dit element en selecteer "Code weergeven" in het vervolgkeuzevenster:
Na deze acties, in het onderste (of rechter) deel van de browserpagina, zien we de paginacode en de styling van alle elementen, en het vereiste element wordt gemarkeerd:
Ik zal niet ingaan op de essentie van deze code, voor degenen die al bekend zijn met HTML het zal niet moeilijk zijn om erachter te komen wat waarvoor verantwoordelijk is. U kunt zien dat de gemarkeerde titel tussen de tag staat
, waarbinnen de link zich bevindt met de tekst "Extra velden in Joomla".In dit stadium zijn we geïnteresseerd in de ontwerpstijlen van bepaalde pagina-elementen, of het nu een titel, een menu, een afbeelding of platte tekst is.
Hoe een CSS-bestand met sjabloonstijlen te definiëren
Stijlen die van toepassing zijn op elk element zijn te zien aan de rechterkant van de browser, en iets naar rechts wordt een css-bestand getoond dat deze code bevat en een regel code waarin deze stijlen te vinden zijn:
Nadat we de locatie van het stijlbestand hebben gevonden, kunt u het naar eigen goeddunken gaan bewerken, waardoor we het ontwerp van onze sjabloon naar eigen goeddunken kunnen wijzigen. In de toekomst zal voor degenen die niet bekend zijn met de basisprincipes van CSS, een speciale sectie worden gemaakt, maar voor nu onthouden we waar en waar we moeten zoeken voor verdere bewerking.
Ik wil opmerken dat het veel handiger is om stijlen vooraf rechtstreeks in de browser toe te passen en als het resultaat bij u past, deze vervolgens naar een bestand over te zetten. Als voorbeeld verander ik de kleur van de links op de pagina en de grootte van de koptekst in de browser, dit is wat ik uiteindelijk kreeg:
We hebben de stijlen uitgezocht, nu blijft het om uit te zoeken welk bestand verantwoordelijk is voor de structuur van de site en hoe ermee te werken.
Sitestructuurbestand - index.php
In elke Joomla-sjabloon is een specifiek bestand verantwoordelijk voor de structuur, in de meeste gevallen is dit het index.php-bestand dat zich in de hoofdmap van de sjabloonmap bevindt. In de Protostar-sjabloon bevindt het indexbestand zich in de map templates / protostar / index.php, hij is degene die verantwoordelijk is voor de locatie van bepaalde elementen op de sitepagina's.
Dit bestand bestaat uit 220 regels code geschreven in PHP-talen en HTML (en wat JavaScript) die er als volgt uitzien:
In het begin bestand gaat de code die verantwoordelijk is voor de verbinding extra bestanden(stijlen, scripts), check vooraf ingestelde instellingen sjabloon en nog veel meer. Dezelfde pagina-opmaak begint met regels
(126 regels code):
Door de code van dit bestand te wijzigen, kunt u de sitesjabloon radicaal wijzigen, de weergavelocatie van moduleposities en hun nummer wijzigen, de kop- en voettekst van de site wijzigen, enzovoort.
We zullen geen wijzigingen aanbrengen in de code, de volgende lessen zullen hieraan worden gewijd, voorlopig zullen we slechts een paar regels code toevoegen waarmee we onze eigen stylesheet in onze Joomla-sjabloon kunnen opnemen.
Uw eigen stijlbestanden koppelen aan de Joomla-sjabloon
Voordat we beginnen met het opnemen van onze eigen CSS-bestanden in onze sjabloon, moeten we eerst definiëren waarvoor u het nodig heeft. Hier kunnen verschillende redenen voor zijn:
Preventie van gegevensverlies - u gebruikt standaard sjabloon en breng wijzigingen aan in bestaande bestanden stijlen, na het bijwerken van het CMS, worden deze bestanden vervangen door nieuwe en gaan alle eerder aangebrachte wijzigingen verloren.
Scheiding van taken - voor elk afzonderlijk element kunt u maken aparte bestanden, die alleen verantwoordelijk is voor het ontwerp. Maar hier is het belangrijk om het niet te overdrijven, je moet niet te veel bestanden maken.
Verschillende apparaten - nu worden niet alleen computers, maar ook telefoons, tablets en zelfs horloges gebruikt om toegang te krijgen tot internet. U kunt dus voor elk afzonderlijk apparaat alleen het stijlbestand maken en laden dat ervoor is bedoeld.
Hoe te leren creëren en verbinden eigen bestanden stijlen in kant-en-klare sjablonen zijn altijd handig.
Uw eigen css-bestand maken
Eerst moeten we creëren nieuw bestand stijlen in de daarvoor bestemde map, meestal een map met de naam "css". Het bestand is aangemaakt op een standaard manier, de naam doet er niet toe, het belangrijkste is dat het de extensie ".css" heeft, ik heb mijn nieuwe bestand "mycss.css" genoemd.
Voeg regels code toe aan het index.php-bestand
Nu moeten we opnieuw verbinding maken, want dit bestand, met andere woorden, vertel de sjabloon dat we een nieuw bestand hebben en we zullen het gebruiken. Open hiervoor het sjabloonindexbestand (index.php), in de coderegel op nummer 15 vinden we de volgende code:
$ gebruiker = JFactory :: getUser ();
We voegen er direct achter nieuwe lijn:
$ doc = JFactory :: getDocument ();
Je zou zoiets als het volgende moeten krijgen:
Op dit stadium we hebben zojuist een variabele gedeclareerd waarmee we onze nieuwe stylesheet zullen opnemen. Nu moeten we nog een regel code schrijven, die direct verantwoordelijk is voor de verbinding van het CSS-bestand.
// Voeg stylesheets toe
Daarna voegen we onze code toe voor css-verbindingen het dossier:
$ doc-> addStyleSheetVersion ($ dit-> baseurl. "/ templates /". $ dit-> sjabloon. "/css/mycss.css");
Ik heb het zo:
Hoe te controleren of onze stylesheet is inbegrepen
Om er zeker van te zijn dat onze stylesheet echt wordt opgenomen, moeten we de paginacode opnieuw openen, maar deze keer op een iets andere manier. Klik met de rechtermuisknop ergens op de pagina in het browservenster en selecteer het item "Paginacode weergeven" in de vervolgkeuzelijst of druk op de toetsencombinatie Ctrl + U.
In het geopende venster vinden we de coderegels die beginnen met
Als het niet in de lijst staat, moet u mogelijk de pagina opnieuw laden door de cache te wissen (toetscombinatie Ctrl + F5)
Ik beschouw deze les als voltooid, we hebben de algemene vragen over het bewerken van sjablonen in Joomla opgelost, geleerd hoe we met de paginacode moeten werken, en we hebben onze eigen stijlbestanden gemaakt en gekoppeld.
In de volgende les zullen we het proces van het bewerken van een sjabloon nader bekijken en
De laatste vertegenwoordiger van extensies die we moeten overwegen, zijn sjablonen. Het is de sjabloon in CMS Joomla 3, en in elke andere versie bepaalt de look en feel van de site. Dankzij sjablonen kunt u het ontwerp van uw site radicaal veranderen, waarbij u een minimum aan tijd besteedt, u hoeft alleen maar de kant-en-klare sjabloon te downloaden en te installeren en de plaats van uitvoer van de modules te bepalen.
Maar voordat u begint met het installeren van een nieuwe sjabloon, moet u erachter komen uit welke, of beter gezegd, uit welke bestanden de Joomla 3-sjablonen bestaan.
Waar bestaat een Joomla 3-sjabloon uit?
Voor templates in Joomla is er een speciale map "templates", in de root waarvan elke template zijn eigen gelijknamige map heeft. Alle sjablonen bestaan zonder uitzondering uit bestanden en het aantal van deze bestanden kan per sjabloon verschillen. Maar er zijn ook standaardbestanden, zonder welke geen sjabloon werkt:
- index.php- indexbestand, het definieert de structuur van de site
- templateDetails.xml- dit bestand bevat alle informatie over de sjabloon en wordt gebruikt om de sjabloon via het bedieningspaneel te installeren
- Stijlbestanden (.css)- met hun hulp wordt het ontwerp van de pagina's bepaald
Bovendien kunnen sjablonen bevatten: scriptbestanden (.js), afbeeldingen, talen en nog veel meer. De onderstaande schermafbeelding toont een set bestanden die deel uitmaken van de standaard "Protostar"-sjabloon:
Wat zijn de sjablonen?
Er zijn nogal wat soorten sjablonen, ze kunnen worden ingedeeld volgens de kaders waarop ze zijn geschreven of andere parameters, maar alle soorten sjablonen kunnen worden onderverdeeld in twee grote categorieën:
- Websitesjablonen- verander het uiterlijk en het ontwerp van de site
- Configuratiescherm-sjablonen- dit type sjablonen is specifiek bedoeld voor het configuratiescherm, ze hebben op geen enkele manier invloed op de site.
Werken met Joomla 3-sjablonen
We hebben de variëteiten, opslaglocatie en bestanden van sjablonen bedacht, laten we het nu hebben over hoe u met sjablonen kunt werken via het configuratiescherm. Laten we eerst naar de sectie "Sjablonen: stijlen (site)" gaan ("Extensies" -> "Sjablonen") en kijken welke sjablonen al aanwezig zijn in de basisassemblage van de CMS Joomla:
Op de pagina "Sjablonen: stijlen (site)" kunt u zien dat we twee sjablonen Beez3 en Protostar, deze laatste is standaard voor alle pagina's van de site geïnstalleerd, let hier op, want in Joomla kan één en dezelfde site uit meerdere templates bestaan. En voor verschillende secties van de site kunt u uw eigen toewijzen eigen sjabloon, waardoor de site aantrekkelijker wordt.
Laten we een van de sjablonen openen om te bewerken en kijken wat en hoe u kunt bewerken:
Op het eerste tabblad met de naam "Details" zien we wat informatie over deze sjabloon, daar schrijven de ontwikkelaars ons dat de sjabloon het Bootstrap-framework gebruikt.
Het volgende tabblad “ Extra opties»Bevat basis instellingen sjabloon, hier kunnen we de kleur van de tekst en achtergrond van de site, het logo, de titel, lettertypen en andere instellingen wijzigen:
En het laatste tabblad - "Binden aan het menu", alleen met zijn hulp, kunt u een sjabloon toewijzen voor de hele site of voor bepaalde secties. We markeren alleen die menu-items waarvoor deze sjabloon wordt gedefinieerd:
Moduleposities in de Joomla 3-sjabloon
In de les over Joomla-modules zeiden we dat ze op de site worden weergegeven in strikt gedefinieerde posities, de zogenaamde moduleposities. voor elk specifieke sjabloon het aantal en de locatie van deze posities is verschillend.
Hoe u de posities van modules in Joomla 3 . kunt vinden of waar u deze kunt zien? Hiervoor biedt Joomla een speciale voorbeeld, maar standaard is het niet beschikbaar (uitgeschakeld) en moet het worden ingeschakeld in de instellingen.
Om de weergave van moduleposities in Joomla 3 in te schakelen, klikt u op de pagina "Sjablonen: stijlen (site)" op de knop "Instellingen". Daarna gaan we naar de pagina "Instellingen sjabloonbeheer", waarop we de schakelaar "Moduleposities bekijken" op de positie "Ingeschakeld" zetten:
Ga daarna terug naar de sjabloonbeheerpagina - "Sjablonen: stijlen (site)" en klik op het oogpictogram dat zich net links van de sjabloonnaam bevindt:
Op de pagina die wordt geopend, ziet u alle posities van de modules die beschikbaar zijn in de sjabloon en hun locatie. In de toekomst zal deze informatie helpen om bepaalde modules erin weer te geven.
Uw eigen moduleposities maken
We hebben al geleerd hoe we de reeds bestaande posities van modules kunnen bekijken, maar wat als de sjabloon niet precies de positie bevat die we nodig hebben? In dit geval kunt u uw eigen positie voor modules in kant-en-klare sjabloon Joomla. Het proces is niet ingewikkeld, maar vereist bewerking bepaalde bestanden sjabloon - index.php en templateDetails.xml.
In het eerste bestand geven we aan waar de nieuwe positie voor de modules komt te staan, in het tweede zullen we de engine laten weten dat deze positie in de template aanwezig is en er mee gewerkt kan worden.
Om van woorden naar daden te gaan, open eerst het bestand templateDetails.xml, die zich bevindt in hoofdmap sjabloon. Het heeft geen zin om nu in de essentie te duiken, we zijn alleen geïnteresseerd in de posities voor de modules, ze worden tussen de regels verklaard<positie> module-positie-naampositie> (regels 28-47 van het Protostar-sjabloon). Er zijn er standaard 18:
Om onze positie van de modules te verklaren, voeg toe extra regel(of meerdere regels) als volgt:
mijn-module-positie
We slaan het bestand op, u kunt het sluiten, het belangrijkste is om de naam te onthouden van de functie waaronder u het hebt gedeclareerd.
Open nu het bestand index.php en voeg het toe nieuw blok DIV, dat de container zal zijn voor de nieuwe positie van de modules. Ik besloot bijvoorbeeld om nieuwe positie voor modules in de voettekst van de site. We schrijven de volgende code in de footer:
Div>
Preventie van gegevensverlies - u gebruikt standaard sjabloon en breng wijzigingen aan in bestaande bestanden stijlen, na het bijwerken van het CMS, worden deze bestanden vervangen door nieuwe en gaan alle eerder aangebrachte wijzigingen verloren.
Scheiding van taken - voor elk afzonderlijk element kunt u maken aparte bestanden, die alleen verantwoordelijk is voor het ontwerp. Maar hier is het belangrijk om het niet te overdrijven, je moet niet te veel bestanden maken.
In de volgende les zullen we het proces van het bewerken van een sjabloon nader bekijken en
