{"id":15714600,"date":"2024-06-07T09:54:45","date_gmt":"2024-06-07T09:54:45","guid":{"rendered":"https:\/\/wpml.org\/documentation-6\/compatibilite-de-theme\/comment-creer-des-themes-wordpress-rtl\/"},"modified":"2024-06-07T09:54:46","modified_gmt":"2024-06-07T09:54:46","slug":"comment-creer-des-themes-wordpress-rtl","status":"publish","type":"page","link":"https:\/\/wpml.org\/fr\/documentation-6\/compatibilite-de-theme\/comment-creer-des-themes-wordpress-rtl\/","title":{"rendered":"Comment cr\u00e9er des th\u00e8mes WordPress RTL"},"content":{"rendered":"

RTL signifie de droite \u00e0 gauche. Seules quelques langues dans le monde utilisent le sens du texte RTL, mais ces langues couvrent plus d’un milliard de personnes. L’ajout de la prise en charge RTL<\/a> \u00e0 votre th\u00e8me est simple et peut consid\u00e9rablement augmenter son march\u00e9.<\/p>\n

Voici deux pages, l’une en sens RTL et l’autre en sens LTR (normal) :<\/p>\n\n\n\n\n
Anglais – LTR<\/th>\nH\u00e9breu – RTL<\/th>\n<\/tr>\n
\"Page<\/a><\/td>\n\"Page<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Vous pouvez voir comment tout ce qui se trouve dans la page RTL appara\u00eet \u00ab\u00a0retourn\u00e9\u00a0\u00bb horizontalement. C’est comme si vous regardiez la page du RLD \u00ab\u00a0normal\u00a0\u00bb \u00e0 travers un miroir. La cr\u00e9ation de cette image miroir est en fait assez facile. La direction \u00ab\u00a0dir\u00a0\u00bb du CSS fera le plus gros du travail et vous n’aurez besoin de faire des patchs qu’\u00e0 quelques endroits.<\/p>\n

Chargement d’un fichier CSS diff\u00e9rent pour les langues RTL<\/h2>\n

WordPress sait quelles langues ont un flux RTL et il vous permet de personnaliser facilement leur mise en page. Cr\u00e9ez un nouveau fichier rtl.css et placez-le dans le r\u00e9pertoire racine de votre th\u00e8me.<\/p>\n

WordPress chargera le fichier rtl.css apr\u00e8s avoir charg\u00e9 le fichier styles.css normal, de sorte que le fichier CSS RTL ne doit \u00e9craser que les attributs qui doivent \u00eatre modifi\u00e9s. Cela signifie que le fichier rtl.css est g\u00e9n\u00e9ralement assez petit, pour la plupart des th\u00e8mes.<\/p>\n

R\u00e9glage du sens de la page sur RTL<\/h2>\n

L’attribut \u00ab\u00a0direction\u00a0\u00bb de CSS indique au navigateur la direction de la page. Pour les langues RTL, vous devez choisir \u00ab\u00a0rtl\u00a0\u00bb. Il existe un autre attribut \u00ab\u00a0magique\u00a0\u00bb que vous devez d\u00e9finir pour un affichage RTL correct. Il s’agit d’un \u00ab\u00a0unicode-bidi\u00a0\u00bb. Cet attribut \u00ab\u00a0magique\u00a0\u00bb est assez simple \u00e0 comprendre lorsque l’on a l’habitude d’\u00e9crire en RTL. Il contr\u00f4le la mani\u00e8re dont les caract\u00e8res sont affich\u00e9s \u00e0 l’int\u00e9rieur de la ligne.<\/p>\n

Pour un affichage RTL correct, ajoutez ce qui suit au s\u00e9lecteur .body :<\/p>\n


\n{
\ndirection:rtl;
\nunicode-bidi:embed;
\n}
\n<\/code><\/p>\n

Et c’est fini ! Votre th\u00e8me s’affiche d\u00e9sormais en RTL. Presque. Gr\u00e2ce \u00e0 ces deux affirmations, la majeure partie de la page sera correcte. Vous devez maintenant g\u00e9rer les exceptions.<\/p>\n

Inversion du sens du texte, flottement et effacement<\/h2>\n

Chaque endroit du CSS, o\u00f9 vous d\u00e9finissez la direction du texte et les \u00e9l\u00e9ments flottants, n\u00e9cessite une attention manuelle.<\/p>\n

Trouvez tous les s\u00e9lecteurs pour text-align, float et clear. Si l’un d’entre eux indique une direction, alternez entre \u00ab\u00a0droite\u00a0\u00bb et \u00ab\u00a0gauche\u00a0\u00bb. Souvenez-vous de l’image miroir que nous essayons d’obtenir et cela facilitera la compr\u00e9hension de cette transformation.<\/p>\n

Graphiques qui sugg\u00e8rent une direction<\/h2>\n

Il convient \u00e9galement de se m\u00e9fier des graphiques qui ont une signification \u00ab\u00a0directionnelle\u00a0\u00bb. Par exemple, si vous cr\u00e9ez un diaporama, vous pouvez utiliser des fl\u00e8ches pour les \u00e9l\u00e9ments suivants et pr\u00e9c\u00e9dents. N’oubliez pas que votre site appara\u00eetra dans un miroir dans les langues RTL, vous devez donc \u00e9galement inverser les graphiques directionnels. Si vous utilisez une fl\u00e8che pointant vers la droite pour \u00ab\u00a0next\u00a0\u00bb en LTR, vous devez pr\u00e9voir une fl\u00e8che pointant vers la gauche pour \u00ab\u00a0next\u00a0\u00bb en RTL.<\/p>\n

S\u00e9lection de polices personnalis\u00e9es<\/h2>\n

Les langues RTL n’ont pas les m\u00eames polices que les langues LTR. Si vous utilisez des polices fantaisistes et que la mise en page de votre th\u00e8me repose sur elles, vous devez trouver des polices de remplacement pour ces langues. Si vous choisissez une police qui n’existe pas dans une langue RTL, le navigateur reviendra \u00e0 ce qu’il conna\u00eet. Il est pr\u00e9f\u00e9rable que vous indiquiez d’autres polices existantes que vous aimez.<\/p>\n

Si vous utilisez des polices web standard, tout va bien.<\/p>\n

Comment tester votre th\u00e8me en RTL<\/h2>\n

Lorsque vous d\u00e9veloppez votre fichier CSS RTL, il est conseill\u00e9 de toujours tester ce que vous faites.<\/p>\n

    \n
  1. Changez la langue dans le fichier wp-config.php pour cette langue. Si vous utilisez WPML, il vous suffit d’ajouter une langue RTL<\/a> \u00e0 votre site.\n

    \"Ajouter<\/a>
    Ajouter des langues RTL<\/figcaption><\/figure><\/li>\n
  2. Traduisez les textes cod\u00e9s en dur de votre th\u00e8me (au moins ceux du Front-office) dans cette langue. WPML vous permet de le faire en utilisant le module Traduction de cha\u00eenes<\/a>.\n

    \"Traduire<\/a>
    Traduire les textes du th\u00e8me<\/figcaption><\/figure><\/li>\n
  3. Obtenez des exemples de contenu dans cette langue. Pour faciliter l’\u00e9dition en RTL dans l’administration de WordPress, allez dans votre profil, faites d\u00e9filer jusqu’au r\u00e9glage de la langue d’administration<\/a> et r\u00e9glez la langue sur la m\u00eame que la langue d’\u00e9dition.\n

    \"\u00c9dition<\/a>
    \u00c9dition de contenu en mode RTL<\/figcaption><\/figure><\/li>\n<\/ol>\n

    Vous ne connaissez aucune langue RTL ? Utilisez simplement Google Traduisible. La traduction sera en grande partie absurde, mais pour les besoins du d\u00e9veloppement du CSS, c’est tr\u00e8s bien.<\/p>\n

    Passez maintenant en revue les diff\u00e9rents types de contenu de votre site. Veillez \u00e0 inclure les articles, les pages, la page d’accueil et tout contenu personnalis\u00e9 que vous cr\u00e9ez.<\/p>\n

    Pour obtenir les meilleurs r\u00e9sultats, trouvez quelqu’un qui parle cette langue et demandez-lui de v\u00e9rifier votre bon sens. Votre ami parlant la langue RTL se chargera des 5 % de probl\u00e8mes qui vous \u00e9chappent. Il s’agit d’un avantage, mais n’interrompez pas vos efforts RTL si vous ne connaissez personne pour vous aider \u00e0 effectuer les tests. D\u00e8s que vous ferez la Version RTL de votre th\u00e8me, vous recevrez de nombreux commentaires de la part de vos clients. Si vous fournissez 95 % des efforts, ils seront heureux de contribuer \u00e0 la correction des 5 % restants.<\/p>\n

    Bonus – l’administration de votre th\u00e8me en langues RTL<\/h2>\n

    La condition de base pour avoir un th\u00e8me compatible RTL est que le Front-office (contenu public) s’affiche correctement dans les langues RTL. C’est la vraie base, sans laquelle, personne ne peut utiliser votre th\u00e8me pour construire des sites en langues RTL.<\/p>\n

    En outre, de nombreux utilisateurs souhaitent que l’administration de WordPress soit disponible dans leur langue. Cela signifie \u00e9galement de voir les \u00e9crans d’administration de votre th\u00e8me en orientation RTL.<\/p>\n

    La fa\u00e7on la plus simple d’obtenir cette compatibilit\u00e9 RTL pour les \u00e9crans d’administration de votre th\u00e8me est d’utiliser les classes CSS standard de WordPress pour les \u00e9l\u00e9ments de l’interface graphique. Il est vrai que cela signifie que vous ne pouvez pas utiliser d’effets CSS fantaisistes pour all\u00e9ger votre interface graphique. Cela signifie \u00e9galement que votre interface graphique s’int\u00e8gre parfaitement dans l’administration de WordPress et s’affiche correctement en LTR \/ RTL.<\/p>\n

    \"2014<\/a>
    2014 theme admin en RTL. La traduction n’est pas compl\u00e8te, mais tout est bien positionn\u00e9.<\/figcaption><\/figure>\n

    Si vous devez utiliser votre CSS personnalis\u00e9 pour les \u00e9crans d’administration, v\u00e9rifiez son apparence dans une langue RTL. Les r\u00e8gles que vous suivez pour la CSS front-office s’appliquent \u00e9galement \u00e0 la CSS back-office. Le flip aligne, flotte et efface ; \u00e9vitez le positionnement absolu et prenez soin des images.<\/p>\n

    Une excellente r\u00e9f\u00e9rence – le th\u00e8me par d\u00e9faut de WordPress<\/h2>\n

    Pour votre information, les th\u00e8mes WordPress par d\u00e9faut sont tous parfaitement adapt\u00e9s aux langues RTL. Ouvrez le th\u00e8me par d\u00e9faut et recherchez le fichier rtl.css. Vous verrez les modifications apport\u00e9es au CSS du th\u00e8me par d\u00e9faut. En g\u00e9n\u00e9ral, ces changements sont assez limit\u00e9s et faciles \u00e0 suivre.<\/p>\n","protected":false},"excerpt":{"rendered":"

    RTL signifie de droite \u00e0 gauche. Seules quelques langues dans le monde utilisent le sens du texte RTL, mais ces langues couvrent plus d’un milliard de personnes. L’ajout de la prise en charge RTL \u00e0 votre th\u00e8me est simple et peut consid\u00e9rablement augmenter son march\u00e9. Voici deux pages, l’une en sens RTL et l’autre en […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":105097,"menu_order":127,"comment_status":"closed","ping_status":"closed","template":"template-sidebar-2.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_uag_custom_page_level_css":"","ep_exclude_from_search":false,"footnotes":""},"related-projects-category":[],"class_list":["post-15714600","page","type-page","status-publish","hentry"],"spectra_custom_meta":{"ratings_users":["0"],"ratings_score":["0"],"ratings_average":["0"],"_subscription_coupon_product_id":["0"],"_wpv_contains_gutenberg_views":[""],"_alp_processed":["1717754086"],"_views_template":["0"],"_wpml_media_duplicate":["0"],"_wpml_media_featured":["1"],"_wp_page_template":["template-sidebar-2.php"],"_yoast_wpseo_metadesc":["D\u00e9couvrez comment rendre vos th\u00e8mes compatibles avec les langues RTL. Ce tutoriel couvre les techniques CSS, les tests et les conseils sur l'administration RTL de WordPress."],"_last_translation_edit_mode":["translation-editor"],"wpcf-unformatted-code":[""],"wpcf-price-increase-show-from":[""],"wpcf-price-increase-show-till":[""],"_oembed_f56bf1c5a64a315a94e4cbf7a197b2b0":["