Gutenberg komt binnenkort naar WordPress. Uw Site web is hij klaar? Hoewel we nog niet precies weten welke vorm het zal aannemen, zal dit nieuwe contentsysteem in de toekomst aan WordPress worden toegevoegd. Laten we eens kijken naar de mogelijke gevolgen die dit voor uw site kan hebben, en manieren om probleemgebieden van tevoren te identificeren en op te lossen.

gutenberg wordpress

Gutenberg is een WordPress-project dat tot doel heeft gebruikers meer flexibiliteit te geven bij het ontwerpen van hun inhoud. In wezen heeft het project tot doel de huidige editor, die voornamelijk functioneert als tekstverwerker, te vervangen door een meer visuele en gestructureerde interface. Momenteel is Gutenberg een plug-in en het geeft gebruikers de mogelijkheid om hun inhoud op dezelfde manier te bewerken als Visual Composer of andere drag-and-drop-editors (Drag & Drop), maar op een vereenvoudigde en zeer intuïtieve manier.

Voor meer informatie over Gutenberg, hier klikken.

Gutenberg is een enorm bedrijf en zal waarschijnlijk veel eindpunten in uw Site web. Dit zijn de drie gebieden die we zullen onderzoeken voor mogelijke problemen:

  • Jouw thema: Gutenberg heeft zijn eigen set stijlen voor de inhoud. Is uw thema compatibel? Hoe ziet Gutenberg eruit als hij actief is?
  • Jouw plug-ins: Het is mogelijk dat Gutenberg op onverwachte manieren interactie heeft met uw andere plug-ins. We zullen zien wat het zou kunnen zijn en wat we kunnen doen om eventuele problemen op te lossen.
  • Uw inhoud: Gutenberg heeft invloed op de manier waarop uw inhoud wordt weergegeven. We zullen bekijken hoe dit het uiterlijk van uw pagina's kan veranderen, en we zullen enkele mogelijke oplossingen bespreken als u problemen ondervindt.

Voordat u begint, is het een goed idee om een ​​testruimte op te zetten waar u met Gutenberg kunt experimenteren zonder uw hoofdsite in gevaar te brengen. Idealiter zou u uw eigen testruimte moeten maken of een lokale kopie van uw site moeten maken. Zie de volgende zelfstudie voor meer informatie over het uitvoeren van deze taken: Hoe WordPress lokaal te installeren.

Als dit niet mogelijk is, kunt u de tests rechtstreeks op uw site uitvoeren. Houd er rekening mee dat dit riskant kan zijn, aangezien we een aantal delen van uw site zullen activeren en deactiveren. Als u live tests uitvoert, zorg er dan voor dat u een back-up van uw site maakt voordat u begint.

Als je eenmaal weet waar je gaat testen, ga je naar de map met plug-ins en zoek je Gutenberg. Als het eenmaal is geïnstalleerd en geactiveerd, lees dan verder.

Nu Gutenberg is geïnstalleerd, gaan we eens kijken naar het eerste gedeelte van uw site dat mogelijk wordt beïnvloed: uw thema. Als er op dit moment al grote problemen zijn, zoals databasefouten of problemen met het WordPress-dashboard, gaat u verder met sectie Wat te doen als er teveel problemen zijn.

Aangezien Gutenberg voornamelijk interactie heeft met site-inhoud, volstaat het om een ​​paar dingen te testen - gelukkig voor ons.

De eerste is dat Gutenberg wordt geleverd met een eigen stylesheet en een reeks stijlen. Controleer elk van de verschillende soorten pagina's en sjablonen die op uw site worden gebruikt om er zeker van te zijn dat ze nog steeds correct worden weergegeven. Het belangrijkste doel hier is om u te concentreren op elementen in het hoofdinhoudsgebied van uw pagina's, met name de inhoud en afbeeldingsblokken. Als u problemen ziet, hebben de stijlen van Gutenberg waarschijnlijk voorrang op die op uw site.

Om dit te corrigeren, moet u vaststellen waar het probleem vandaan komt. Meestal is dit een CSS-selector die is gericht op een HTML-element of prioriteit van Gutenberg-stijlen boven uw eigen klassen. Probeer hoe dan ook te achterhalen waar de fout zich voordoet. Bepaal vervolgens waarom de stijlen van Gutenberg de jouwe overschrijven en corrigeer je code zodat deze voorrang krijgt.

Probeer correcties aan te brengen in uw eigen thema (of beter nog, in een onderliggend thema of gebied dat is gespecificeerd voor CSS in uw thema), in plaats van Gutenberg te wijzigen. Als u een van de bestanden rechtstreeks in Gutenberg bewerkt, wordt deze waarschijnlijk overschreven wanneer de plug-in wordt bijgewerkt.

Evenzo wilt u voor eens en voor altijd dezelfde tests op uw dashboard uitvoeren. Thema-opties en andere aangepaste secties die door uw thema zijn gegenereerd, lijken tot nu toe de grootste boosdoeners te zijn. Zodra u stijlproblemen op deze gebieden heeft geïdentificeerd, kunt u deze meestal oplossen door een child-thema te wijzigen of te maken en de CSS daar aan te passen.

Na het testen van uw thema, zijn de plug-ins voor uw site als volgt. Let in het bijzonder op plug-ins die shortcodes bieden die u in uw inhoud gebruikt (bijv. Gravity Forms), plug-ins die het uiterlijk van uw inhoud beïnvloeden (bijv. Toegankelijkheidsplug-ins die de tekstgrootte beïnvloeden) en plug-ins die rechtstreeks elementen in uw pagina invoegen (zoals geavanceerde aangepaste velden).

Om dit gebied te controleren, begint u met het verzamelen van een lijst met alle shortcodes die u gebruikt, evenals de pagina's waarop ze bestaan. Ga met uw lijst in de hand naar elk van deze pagina's om te zien of ze werken zoals verwacht. Als u stylingproblemen heeft, is de kans groot dat u hetzelfde probleem ondervindt als voorheen en dat u uw stijlen opnieuw moet aanpassen.

Als de shortcode echter wordt weergegeven en niet de verwachte inhoud (dat wil zeggen dat uw pagina het [shortcode]in plaats van het juiste te doen) is er een andere oplossing. In dit geval kunt u naar het blok kijken waar de shortcode zich bevindt en bevestigen dat het niet als tekst wordt beschouwd (zoek en verwijder ongewenste labels rond de shortcode). Als het probleem aanhoudt, zou het verplaatsen van de shortcode naar een meer geschikt bloktype alles opnieuw moeten starten.

Dit probleem komt voort uit hetzelfde probleem dat we al hebben behandeld: stijlvervangingen. Identificeer de betrokken elementen en corrigeer de CSS.

Het laatste gebied dat we zullen bekijken voor tegenstrijdige problemen betreft het maken van items. Elke plug-in die HTML-elementen in een pagina invoegt zonder shortcodes te gebruiken, wordt hier verdacht, bijvoorbeeld wanneer PHP aangepaste velden extraheert uit de plug-in Advanced Custom Fields.

De meest voorkomende slip bij het maken van elementen draait om incompatibele blokken. Aangezien Gutenberg zijn eigen stijlen biedt, is het mogelijk dat als uw items binnen een onbedoeld blok worden gemaakt, ze niet correct worden weergegeven. De oplossing hiervoor is om ervoor te zorgen dat uw code items toevoegt aan het blok waar u ze wilt hebben.

Het is niet zo urgent als de andere problemen die we hebben besproken, maar er kunnen enkele complicaties optreden bij de manier waarop uw inhoud wordt weergegeven. De meeste van deze problemen zullen het gevolg zijn van kleine stijlveranderingen of deorganisatie blokken. Om dit op te lossen, moet je met het blokkeersysteem spelen totdat je je pagina krijgt zoals jij dat wilt.

Wat te doen als er teveel problemen zijn

Ben je een probleem tegengekomen dat je niet kon oplossen met de suggesties in deze tutorial? Geen paniek ! Het duurt nog even voordat Gutenberg is geïntegreerd in de kern van WordPress.

Schrijf eerst op wat de fout is en welke stappen tot de fout hebben geleid. Hoe meer informatie u kunt verzamelen, hoe beter. Geef al deze informatie door aan het Gutenberg-team. Met een beetje geluk kunnen ze het probleem vaststellen en in een toekomstige release oplossen.

Als je aan een testsite werkte, is dat voorlopig alles wat je kunt doen. Blijf de release-opmerkingen controleren om te zien of uw probleem is opgelost, of probeer het eventueel zelf op te lossen.

Als je aan je live-site werkte, zou het uitschakelen van Gutenberg alles weer normaal moeten maken. Zo niet, dan is het tijd om terug te gaan naar de back-up die u aan het begin van de zelfstudie hebt gemaakt!

Gutenberg wil een enorme verschuiving betekenen in de WordPress-omgeving, die inhoud ten goede wil veranderen. Voordat het de hoofdtak raakt, moet u controleren of uw site zal werken met de nieuwe wijzigingen. Als je andere problemen hebt dan de hier genoemde, betere oplossingen of oplossingen voor iets in deze tutorial, laat dan hieronder een reactie achter.