Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
I'm seeking assistance with loading header menu and footer from external files and ensuring their text content is automatically translated. Additionally, CSS styling for the translation switcher on index.php is not being applied.

Solution:
For the header menu, if it's a WordPress menu, you can follow WPML documentation for translating menus: https://wpml.org/documentation/getting-started-guide/translating-menus/. If it's not a standard WordPress menu, you'll need to wrap all text inside PHP code with the gettext method and then translate them using WPML String Translation.

For the footer, if it's widget-based, follow steps for translating widgets: https://wpml.org/documentation/getting-started-guide/translating-widgets/. If it's directly added to the theme, wrap text in PHP code with the gettext method, scan the theme for strings, and translate them using WPML String Translation.

To apply CSS to the translation switcher on index.php, wrap all direct text in PHP code with functions like __() and then scan the theme for strings. Translate them using WPML String Translation, and the CSS should apply automatically.

Relevant Documentation:

Menu Translation: https://wpml.org/documentation/getting-started-guide/translating-menus/
Widget Translation: https://wpml.org/documentation/getting-started-guide/translating-widgets/
String Translation: https://wpml.org/documentation/getting-started-guide/string-translation/

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 3 replies, has 2 voices.

Last updated by Christopher Amirian 1 year, 3 months ago.

Assisted by: Christopher Amirian.

Author Posts
February 3, 2024 at 3:49 am #15261648

津留崎 真直

Loading header menu and footer in external file.
I want the text in these files to be automatically translated, is it possible?
hidden link

Also, using the original theme, css is not applied to the translation switcher on index.php.
How do I apply the switcher's CSS to the switcher displayed in index.php?
hidden link

February 4, 2024 at 2:49 pm #15263617

Christopher Amirian
WPML Supporter since 07/2020

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

The header of the website seems to be using normal WordPress menus.

If it is, I'd appreciate it if you could use the method below to do the translation for:

https://wpml.org/documentation/getting-started-guide/translating-menus/

The reason that it is not translated automatically is that the menu items are just single strings that do not have context, (For example they are not inside a sentence) that is why it is very hard for translation engines to predict the correct translation.

Please follow the steps mentioned in the documentation to translate the menus.

For the footer, I checked and I am not sure if it si using a widget system or it is something added directly to your theme.

If it uses WordPress `dashboard > Appearance > Widgest, then please follow the steps below to do the translation:

https://wpml.org/documentation/getting-started-guide/translating-widgets/

If it is directly added to the theme, first please make sure that you scan the theme:

https://wpml.org/documentation/getting-started-guide/string-translation/finding-strings-that-dont-appear-on-the-string-translation-page/#scan-the-theme-or-plugin

And then search for the strings in the string translation:

https://wpml.org/documentation/getting-started-guide/string-translation/

Thanks.

February 5, 2024 at 2:27 am #15264156

津留崎 真直

Thank you for your reply.

I've created the theme in original, and the header menu is not a regular WordPress menu, but I'm loading and using the header.php of an external file with index.php.
The footer menu also loads the footer.php of the external file, not the widget.
Fixed page headers and footers are loading header.php and footer.php as well as above。
How can I automatically translate the text contained in these?

I also want to auto-translate index.php, what should I do?
The switcher is not working at the moment.

Below is the source for index.php
---
<?php get_header(); ?>

<main>
<div class="slider-wrap">
<!-- Slick Slider -->
<div class="slider">
<div class="slider-img1"><img src="<?php echo get_template_directory_uri(); ?>/images/slide1.jpg" alt="新富国際語学院"></div>
<div class="slider-img2"><img src="<?php echo get_template_directory_uri(); ?>/images/slide2.jpg" alt="新富国際語学院"></div>
<div class="slider-img3"><img src="<?php echo get_template_directory_uri(); ?>/images/slide3.jpg" alt="新富国際語学院"></div>
</div>
<!-- /Slick Slider -->
<div class="copy-wrap">
<p class="copy"><span>W</span>elcome to<br><span>S</span>hintomi<br class="copy-br"><span class="ms-2 ms-sm-0">I</span>nternational<br><span>L</span>anguage<br class="copy-br"><span class="ms-2 ms-sm-0">A</span>cademy</p>
</div>
</div>

<div class="container top">
<!-- What's New Generator -->
<?php echo do_shortcode( '[showwhatsnew]' ); ?>
<!-- /What's New Generator -->

<div class="full-width blue top-about down-to-top mt-6">
<div class="container">
<h3 class="white">数字で見る新富国際語学院</h3>
<div class="wrap full-width mt-5">
<div class="circle">
<h4>スマイル</h4>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-icon1.png" alt="スマイル">
<p><span>150</span>%</p>
</div>
<div class="circle">
<h4>資格・N3以上</h4>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-icon2.png" alt="資格・N3以上">
<p><span>50</span>人</p>
</div>
<div class="circle">
<h4>進学・就職率</h4>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-icon3.png" alt="進学・就職率">
<p><span>89</span>%</p>
</div>
<div class="circle">
<h4>エージェント数</h4>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-icon4.png" alt="エージェント数">
<p><span>40</span>+</p>
</div>
<div class="circle">
<h4>連続認定</h4>
<img src="<?php echo get_template_directory_uri(); ?>/images/top-icon5.png" alt="連続認定">
<p><span>3</span>年</p>
</div>
</div>
</div>
</div>

<div class="down-to-top mt-6">
<h3>新富国際語学院が選ばれる理由</h3>
<div class="row mt-5">
<div class="col-sm-4 left-to-right spD">
<div class="point-box">
<img src="<?php echo get_template_directory_uri(); ?>/images/top-img1.jpg" class="img-fluid" alt="POINT1">
<div class="point">
<p>POINT<br><span>1</span></p>
</div>
<h4>明るく活気に満ち溢れたキャンパス</h4>
<p>学生たちは、皆笑顔で元気よく挨拶をしてくれます。<br>
授業中も積極的に発言をしたり、ディスカッションをしたり、常に活気に満ち溢れた学びの場所です。</p>
</div>
</div>
<div class="col-sm-4 down-to-top mt-5 mt-sm-0">
<div class="point-box">
<img src="<?php echo get_template_directory_uri(); ?>/images/top-img2.jpg" class="img-fluid" alt="POINT2">
<div class="point">
<p>POINT<br><span>2</span></p>
</div>
<h4>日本語だけでなく、<br>日本の文化・習慣、マナーも学べる</h4>
<p>学生たちは、自分のもっている日本語能力レベルで一生懸命コミュニケーションを取る努力をしています。<br>
日本の文化やマンガなどを通して多くのことを学び、母国と日本のよいところを融合して「日本発・新富国際語学院発のグローバル人財」へと育っていきます。</p>
</div>
</div>
<div class="col-sm-4 right-to-left spD mt-5 mt-sm-0">
<div class="point-box">
<img src="<?php echo get_template_directory_uri(); ?>/images/top-img3.jpg" class="img-fluid" alt="POINT3">
<div class="point">
<p>POINT<br><span>3</span></p>
</div>
<h4>進学・就職への手厚いサポート</h4>
<p>新富国際語学院は、学生の「やりたいこと」、「なりたいこと」を最大限に尊重し、一緒になって進路を決めていきます。<br>
様々な仕事を紹介しながら、ただ単に「日本で働きたい」ではなく、学生自身が「どこで、何をやりたいのか」など、将来のキャリアも視野に入れた計画を行います。</p>
</div>
</div>
</div>
</div>

<div class="full-width blue down-to-top mt-6">
<div class="container">
<h3 class="white">アクセス</h3>
<div class="gmap mt-5">
<iframe src="hidden link" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<p class="text-center footer-tel mt-4">〒262-0022 <br class="d-sm-none">千葉県千葉市花見川区南花園二丁目5番19号<br>
TEL. <span data-action="call">043-276-5828</span> FAX. 043-307-5524</p>
<p class="text-center">最寄駅:JR新検見川駅、京成検見川駅</p>
</div>
</div>

<div class="full-width contact">
<div class="container down-to-top">
<div class="colorbox white contact">
<h3>お問い合わせ</h3>
<p class="mt-4 mt-sm-5">お電話またはお問い合わせフォームより、<br class="d-sm-none">お気軽にご連絡ください。</p>
<div class="row mt-4 mt-sm-5">
<div class="col-sm-6">
<p class="contact-tel mb-0"><i class="fa fa-phone-square me-3" aria-hidden="true"><span data-action="call">043-276-5828</span></p>
<p class="time mt-1 mb-0">受付時間 平日 9:00~17:00</p>
</div>
<div class="col-sm-6 mt-4 mt-sm-0">
お問い合わせフォーム
</div>
</div>
</div>
</div>
</div>
</div><!-- /container -->
</main>

<?php get_footer(); ?>
---

We look forward to your answer.
Thank you

February 5, 2024 at 4:08 pm #15267242

Christopher Amirian
WPML Supporter since 07/2020

Languages: English (English )

Timezone: Asia/Yerevan (GMT+04:00)

Hi there,

I see, you will need to do some changes in your code.

You should wrap all the text inside the code with the gettext method.

For more information:

https://wpml.org/documentation/support/translating-the-theme-you-created/#text-domains-and-domain-paths-in-wordpress

For example:

Instead of:

<h3>お問い合わせ</h3>

You should add:

<h3>__('お問い合わせ', 'tsurukichi');</h3>

Do all the code changes there so every direct text that you add in PHP code will be wrapped in functions like the one above.

After that please go to WordPress Dashboard > WPML > Theme and Plugins localizations and scan your theme.

After that please go to WordPress Dashboard > WPML > String Translation

From the top text domain filter select "tsurukichi" (the name of the domain that you added in PHP)

Select all the texts there and at the bottom click the translate button and they all will be translated automatically.

Thanks.