Hoe u uw thema meertalig en compatibel met WooCommerce kunt maken

Matt Mullenweg, mede-oprichter van WordPress en de CEO van Automattic, werd geïnterviewd door Josh Janssen, waar hij verklaarde dat in mei van dit jaar de niet-Engelse downloads van WordPress voor de eerste keer de Engelse downloads overtroffen.


Deze trend gaat verder met WordPress 4.0, waardoor gelokaliseerde WordPress-sites zoveel eenvoudiger kunnen worden geïnstalleerd en onderhouden. WordPress 4.0 geeft je nu de mogelijkheid om WordPress te downloaden in de taal van je keuze. Dit maakt het installatieproces een fluitje van een cent voor niet-Engelssprekenden. In eerdere versies van WordPress was Engels de standaardtaal en werden andere talen als uitzonderingen behandeld. WordPress 4.0 maakt alle talen gelijk toegankelijk. Deze verandering zal WordPress zeker nog populairder maken over de hele wereld.


Het doel van deze nieuwe functies in WordPress 4.0 is om het aantal internationale gebruikers van WordPress, die eerder geen WordPress konden gebruiken vanwege de taalproblemen, te vergroten. Bovendien zullen de Aziatische en Pacifische landen zoals China, Japan, India, Zuid-Korea en Indonesië naar verwachting Noord-Amerika overtreffen in de eCommerce-omzet van Business-to-Consumer, volgens eMarketer.

Wat betekent dat voor jou als een thema- of plugin-ontwikkelaar? Ten eerste betekent dit dat uw product gereed moet zijn voor lokalisatie. Alle teksten moeten worden ingepakt in 'gettext'-oproepen, zodat gebruikers het in andere talen kunnen gebruiken; internationalisering is echter slechts de eerste stap. In veel landen is het een belangrijke beperking om een ​​site in slechts één taal te kunnen gebruiken. Om echt wereldwijd te gaan werken en gebruik te maken van het enorme potentieel buiten de Engelstalige markt, moeten uw producten ook meertalig zijn.


Gelukkig is met WPML het uitvoeren van meertalige sites eenvoudig. We geven een overzicht van de zeven beste best practices die gevolgd moeten worden, zodat uw thema's en plug-ins geweldig werken op zowel eentalige als meertalige sites. Door deze eenvoudige richtlijnen te volgen en vast te houden aan schone codering, kunnen uw producten meertalige sites van stroom voorzien.


Hoe eindgebruikers zullen vertalen en waarvoor u zich moet voorbereiden

Wanneer u uw thema ontwikkelt, is het van cruciaal belang om te begrijpen hoe uw eindgebruikers hun sites zullen vertalen. Zodra u hun perspectief realiseert, zult u zich realiseren wat u moet doen om uw thema meertalig te maken.


Een typisch thema toont een koptekst, voettekst, menu's, widgets, inhoud en uw eigen aangepaste elementen. Hier is een voorbeeld van een WooCommerce-site, gebaseerd op een aangepast Twentyfourteen-thema:


Met WPML kunt u alle standaard WordPress-elementen vertalen. Dit bevat:

  • menu's

  • Standaard widgets

  • Navigatie elementen

  • Alle teksten verpakt in 'gettext'-oproepen

  • Inhoud plaatsen inclusief aangepaste velden en taxonomie

  • producten

  • Thema opties

  • Afbeeldingen en tekenreeksen die daarmee verband houden


U hoeft niets in uw code toe te voegen om al deze secties te laten vertalen. Let op uw aangepaste elementen, zodat uw gebruikers ze ook kunnen vertalen.


Hieronder ziet u een tabel die samenvat hoe de eindgebruiker standaard site-elementen met WPML zal vertalen. 

Wat eindgebruikers kunnen vertalen met behulp van WPML

Vertaal de header met behulp van WPML String Translation Tool

Omdat het geen deel uitmaakt van een post, pagina of taxonomie, moeten we de String Translation van WPML gebruiken om het te vertalen. Ga naar WPML-> String Translation, zoek naar de tekenreeks op basis van de inhoud (de titel van de site) en vertalen.

 

Vertaal WordPress-menu's

Wanneer u naar Uiterlijk> menu's gaat, ziet u de menuvertaalbesturingselementen van WPML. Meer informatie over het vertalen van menu's om te zien hoe dit werkt.

Vertaal aangepaste thema- of pluginelementen

Veel thema's of plug-ins hebben unieke functies, die teksten opslaan in de wp_options tafel. De Inleidend bericht, door Toevlucht doet dat precies. Het thema of de plug-in slaat deze teksten op in de tabel wp_options en we moeten WPML vertellen om ze te vertalen. We voegen deze informatie toe aan het taalconfiguratiebestand. Daar vertellen we WPML welke vermeldingen in de tabel wp_options moeten worden vertaald.

Deze techniek is goed wanneer de toetsen de opties zijn vastgelegd (zoals in de meeste thema's). Als uw thema arrays van items gebruikt, die kunnen groeien met gebruikersinvoer, moet u deze items dynamisch registreren. Gebruik hiervoor de functies icl_register_string en icl_t van WPML.

Het postbedrijf vertalen

Met WPML kunnen gebruikers gemakkelijk content vertalen. De schermen voor nabewerking bevatten de vertaling van WPML besturingselementen, waarmee u nieuwe vertalingen kunt maken en bestaande kunt bewerken.

U hoeft niets in het thema of de plug-in te doen om dit te laten gebeuren. Inhoud vertalen is een kernkenmerk van WPML.

Wat u wel moet controleren, is dat elke tekst die uw thema aan de uitvoer toevoegt, vertaalbaar is.

Als u niet bekend bent met GetText, lees er dan meer over in onze veelgestelde vragen over de vertaling van themateksten.

Vertaal widgets met stringvertaling

Met WPML kunnen gebruikers de inhoud van tekstwidgets vertalen. Het vertaalt ook titels van alle andere widgets. Als uw thema of plug-in zijn eigen aangepaste widgets maakt, zorg er dan voor dat u hun titels doorgeeft via de standaard WordPress-filters. Op deze manier kunnen gebruikers met WPML de titels van uw widgets vertalen via het scherm String Translation.

De voettekst vertalen

 Sommige thema's hebben een aangepast beheerdersscherm om de voettekst op te slaan. Net als andere teksten die we hebben gezien, heeft het thema of de plug-in de voetteksten in de wp_options tafel ook. We voegen deze vermeldingen toe aan het taalconfiguratiebestand en vertellen WPML om ze te vertalen.

 



Voor een volledige gedetailleerde uitleg over hoe eindgebruikers WPML gebruiken, gaat u naar onze handleiding over het bereiken van compatibiliteit met WPML.


U hoeft niet uw hele thema of plug-in te herschrijven omdat WPML dit alles afhandelt. Deze tutorial is niet zo moeilijk als het beklimmen van de Mount Everest, maar er zijn een paar dingen die je moet bewerken om het gemakkelijk te maken voor je eindgebruiker.


Nu we hebben besproken hoe mensen de standaard WordPress-elementen zullen vertalen, bekijken we samen wat u moet doen om meertalige compatibiliteit voor uw aangepaste elementen te waarborgen.

De beste 7 beste praktijken om uw thema meertalig en compatibel met WooCommerce te maken

1. Voeg GetText-functies toe aan moeilijk gecodeerde tekst

Voor plug-ins of thema's moet u uw hard gecodeerde tekst in 'gettext'-functies plaatsen. Dit omvat de koptekst, voettekst en widgettekst. Uw sjabloonbestanden bevatten een assortiment productinformatie en hard gecodeerde tekst. De meeste sjablonen bevatten bijvoorbeeld de productnaam en een 'koop'-link. De productnaam komt uit de database, dus u hoeft zich geen zorgen te maken over de vertaling ervan.

Je moet ervoor zorgen dat alle hardgecodeerde teksten kunnen worden vertaald met 'gettext'-functies.

Goed

Slecht

"/>

"Vergelijkbare producten" en "Nu kopen!" Zijn niet verpakt in GetText-aanroepen.

Zorg ervoor dat u het tekstdomein van uw thema gebruikt voor alle GetText-oproepen.

2. Gebruik API-functies om naar WooCommerce-pagina's te linken

Veel e-commercethema's bevatten speciale pagina's, zoals de 'winkelwagen' of 'account'. Het thema bevat vaak links naar deze pagina's die op elke pagina van de site worden weergegeven.


Als u een WordPress-menu gebruikt voor deze links, moet u helemaal klaar zijn. WPML geeft voor elke taal een ander WordPress-menu weer, dus de links naar deze 'speciale pagina' verschillen per taal. Als u deze links echter hardwared in sjabloonbestanden, moet u WPML toestaan ​​om de links te vervangen, met links naar deze pagina's in de juiste taal..


De juiste manier om naar de speciale WooCommerce-pagina's te linken, is door de API-functies van WordPress en de ID's van de WooCommerce-pagina te gebruiken. WooCommerce Meertalig filtert oproepen naar 'get_option ()' met de WooCommerce-pagina-ID's. Het geeft de ID van de pagina terug in de huidige taal.


Goed

Slecht

“>

“>

'winkel' is de slug van de pagina in de standaardtaal.

“>

De 'winkelpagina'-ID is hard gecodeerd. Het zal anders zijn voor verschillende sites en voor verschillende talen.

De URL van de 'winkelpagina' is hard gecodeerd. Het zal anders zijn voor verschillende talen.

3. Voeg meertalige productaanbiedingen toe

Als u de WooCommerce-snelcodes gebruikt om de productvermelding weer te geven, bent u klaar. WooCommerce laadt de producten in de juiste taal en geeft deze weer.

Als u producten liever handmatig laadt, met uw eigen code, moet u ervoor zorgen dat u de WordPress API of WooCommerce API-aanroepen gebruikt. Als u de database rechtstreeks opent, filtert WPML uw oproep niet en ontvangt u een mix van alle producten in alle talen.

Goed

Slecht

[featured_products per_page = "12" columns = "4"]

[product id = "99"]

(meer)

'product', 'suppress_filters' => 0)); ?>

$ args = array (

'post_type' => 'product',

'posts_per_page' => 10,

);

$ producten = nieuwe WP_Query ($ args);

?>

'artikel')); ?>

suppress_filters wordt standaard ingesteld op true, waardoor taalfiltering wordt voorkomen.

$ products = $ wpdb-> get_results ($ wpdb-> prepare ("SELECT * FROM $ wpdb-> posts WHERE post_type =" product "BESTELLING PER ID DESC LIMIT% d", 10));

WPML filtert SQL-queries op laag niveau niet. Alle producten in alle talen worden geretourneerd.

Zodra u de juiste producten hebt geladen, hoeft u zich bij het weergeven ervan geen zorgen te maken over talen. Elk product krijgt zijn eigen aangepaste velden, met informatie in de juiste taal.

4. Voeg multi-valuta betalingsopties toe

Sommige wereldwijde eCommerce-sites hebben zowel meerdere talen als meerdere valuta's nodig. Uw thema moet die sites ondersteunen die meerdere valuta's nodig hebben. Voor veel niet-Amerikaanse sites is het ondersteunen van meerdere valuta's een zeer belangrijke functie. Veel Europese sites moeten bijvoorbeeld kosten in euro, Britse ponden en Amerikaanse dollars in rekening brengen. Oost-Europese sites vereisen vaak Russische roebel en Aziatische sites hebben verschillende andere valuta's nodig.

Ondersteuning voor meerdere valuta's is inbegrepen in WooCommerce Meertalig. Om bezoekers toe te staan ​​te wisselen tussen valuta, moet uw thema een optionele valutaswitcher bevatten.

U kunt een wisselaar voor valuta weergeven met een PHP-oproep of door een shortcode in te voegen.

'% naam (% symbool)')); ?>

[Currency_switcher]

Voor een volledige tutorial, bezoek de tutorial over Multi-Currency voor WooCommerce. Houd er rekening mee dat de valutawisselaar alleen wordt weergegeven als de site meerdere valuta gebruikt.

5. Word RTL-compatibel

Engels - LTR

Hebreeuws - RTL


WooCommerce-thema's moeten de RTL-richtlijnen volgen, net als WordPress-thema's. Maak een 'rtl.css'-bestand met de CSS-regels voor RTL-weergave.

Maak een nieuw 'rtl.css'-bestand en plaats het in de hoofdmap van uw thema. De 'dir'-richting in CSS zal het meeste werk doen en je hoeft maar een paar plaatsen te patchen. Stel voor RTL-talen het kenmerk 'direction' in CSS in op 'rtl'. Voeg daarnaast het 'unicode-bidi- attribuut' toe.

Goede RTL-weergave toegevoegd aan .body-selector:


richting: rtl;

unicode-bidi: insluiten;


Nu wordt je thema weergegeven in RTL. Om uitzonderingen te behandelen, ga je naar de RTL-thema's ondersteuningsrichtlijnen.

6. Beheer verschillende tekstlengtes in verschillende talen

Wanneer u uw meertalige WooCommerce-thema maakt, begrijpt u dat sommige teksten langer zijn in bepaalde talen en korter in andere talen. Sommige taallengtes kunt u niet testen, omdat uw eindgebruikers de inhoud zelf zullen vertalen.

Bekijk bijvoorbeeld deze twee productblokken.


CSS geoptimaliseerd voor korte teksten in het Engels

Langere Spaanse tekst past de ruimte niet

De beste manier om compatibiliteit met meerdere lengtes te bereiken, is om je thema te testen met teksten die x2 langer en ½ korter zijn. In de meeste gevallen zal dit elke taal omvatten die wordt vertaald. Het wordt sterk aanbevolen om vloeistoflay-outs te gebruiken om tekst van verschillende formaten te verwerken. Door een vloeiende lay-out kan elk element het formaat wijzigen en het gebied vastleggen dat nodig is. Het realiseren van een vloeiende lay-out kost tijd, maar voorkomt visuele storingen.

Tekst loopt naadloos over naar de volgende regel zonder Glitch

WooCommerce 'style.css' gebruikt de aanduiding 'white-space: no-wrap'. Maar in ons voorbeeld, om de tekst goed in te pakken, moet je 'witruimte: normaal;'.

7. Maak een taalconfiguratiebestand

Als u uw thema volledig WPML-compatibel wilt maken, moet u het voor anderen eenvoudig maken om meertalige sites met het thema te gebruiken door een taalconfiguratiebestand te maken.

WPML kan een configuratiebestand lezen dat aangeeft wat er moet worden vertaald in het thema of de plug-in. Maak en benoem het bestand 'wpml-config.xml'. Sla het bestand op in de hoofdmap van het thema. Gebruik de structuur en sectie-indeling in het voorbeeld in dit wpml-config.zip voorbeeldbestand en bewerk het met uw eigen aangepaste inhoud.

De inhoud van het bestand 'wpml-config.xml' moet als volgt zijn ingepakt tags openen en sluiten:



In het bestand 'wpml-config' stelt u in welke functies moeten worden vertaald door WPML, uw aangepaste berichttypen, aangepaste taxonomieën, aangepaste velden en beheertekst (reeks afkomstig van wp_options) en kunt u ook de taal van uw thema instellen switcher ziet er gewoon uit deze korte tutorial te volgen voor volledige voorbeelden en details over het structureren van uw taalconfiguratiebestand, bezoek onze Language Configuration File Tutorial.

Test uw site

Nu u begrijpt dat het nodig is om uw thema of plug-in meertalig en WooCommerce klaar te maken en na het volgen van de gebruikelijke ontwikkelingspraktijken zoals hierboven beschreven, is het tijd om uw thema of plug-in te testen.


Meestal probeer je tijdens het testen alles te vertalen door vertalingen in alle delen van je site in te voeren. Maar dit zou veel tijd kosten. Daarom hebben we een testtool voor u gemaakt: Plug-in voor WPML-compatibiliteitstesttools.


Deze tool injecteert dummyvertalingen voor uw site, zodat u van taal kunt veranderen en kunt zien wat er is vertaald en wat in uw oorspronkelijke taal is gebleven. Onze testtool bespaart u enkele uren testen en helpt u te zien welke gebieden u moet verbeteren in uw thema of plug-in.

Installeer de juiste plug-ins voor meertalige WooCommerce

Uw klanten moeten de volgende plug-ins hebben voor meertalige e-commercesites met WooCommerce:

  • WPML CMS door OnTheGoSystems

  • WooCommerce door WooThemes

  • WooCommerce Meertalig door OnTheGoSystems


WPML wordt geleverd met de kernplug-in en add-ons. Met deze architectuur kunnen verschillende mensen verschillende onderdelen installeren die ze nodig hebben. Voor meertalige WooCommerce-sites hebt u de volgende WPML-componenten nodig:


  • WPML (Core)

  • WPML String Translation

  • WPML Translation Management

  • WPML-mediaberichten

GoGlobal Partnership

WPML wordt gebruikt op meer dan 400.000 websites en elk thema of elke plug-in die de WordPress API gebruikt, kan meertalige compatibiliteit verkrijgen met behulp van WPML. Waarom zou u het risico nemen om geen meertalig compatibel en WooCommerce-compatibel thema of plug-in te hebben??


WPML heeft een GoGlobal-programma waarbij we gratis WPML-accounts aanbieden om auteurs te thematiseren en in te pluggen voor compatibiliteitstests. We hebben verschillende thema's die momenteel compatibel zijn, waaronder verschillende WooThemes, alle elegante thema's, Avada en vele thema's op ThemeForest.


Bij WPML nemen we compatibiliteit serieus met vijf deskundige ontwikkelaars en consultants die fulltime werken aan compatibiliteit voor alle auteurs van thema's en plug-ins om meertalige compatibiliteit te verkrijgen. Meld u vandaag gratis aan voor ons WPML GoGlobal-programma.

Multilingual-ready-thema's verspreiden

Wanneer u uw thema verspreidt, wilt u dat mensen het kunnen gebruiken voor eentalige en meertalige sites. De ontwerptips die we in dit artikel hebben gegeven, zijn grotendeels gebaseerd op de praktische tips van WordPress, dus je themacode bevat nauwelijks specifieke code voor WPML.


Uw klanten moeten WPML en de vereiste componenten installeren om meertalige sites uit te voeren. Aangezien WPML een handelsmerk is (en om andere goede redenen), zou u WPML niet moeten bundelen met uw thema.


In plaats daarvan biedt WPML een kleine component voor aankoop en automatische installatie, die u van harte welkom bent om te gebruiken. Met dit onderdeel kunnen uw gebruikers WPML rechtstreeks vanuit de WordPress-beheerder kopen. Het crediteert u ook met partnercommissie voor een dergelijke verwijzing.


Het integreren van deze kleine auto-installatiecomponent in uw thema is een geweldige manier om mensen te laten zien dat uw thema echt compatibel is met WPML en meertalige sites van stroom kan voorzien. Het geeft uw gebruikers ook een gestroomlijnd proces voor het kopen en installeren van WPML, zonder FTP te hoeven gebruiken om het naar hun servers te uploaden.

Samenvatting

Nu we de zeven beste tips voor het maken van uw thema of het invoegen van WooCommerce en Multilingual hebben besproken, hopen we dat u klaar bent om aan de slag te gaan. Klaar zijn voor meerdere talen is gemakkelijk en mogelijk voor elke thema-auteur.  


Het is net zo eenvoudig als het gebruik van WordPress-best practices, zoals het gebruik van 'gettext'-functies en het correct verwerken van hardcoded WooCommerce-koppelingen, om uiteindelijk een taalconfiguratiebestand toe te voegen aan uw thema. Vergroot de veelzijdigheid van uw product op de markt door u te richten op de internationalisering van uw thema of plug-in.

We geven $ 8.000 weg in ons nieuwste WPML en WooCommerce WordPress Themes Most Wanted-evenement. Je moet erin zijn om het te winnen!