WordPressの設定 - サイト管理マニュアル

このページでは、WordPressの基本的な構成、利用しているテーマ、スタイルシート（CSS）によるデザインの調整、利用しているプラグイン及びその設定などについて、簡単に説明します。

WordPress について

MTS日本支部のウェブサイトは、フリーのブログシステム WordPress で構築されており、その実体を構成するPHPスクリプトやスタイルシート（CSSファイル）、その他画像等の各種のデータは、サーバーの "www" ディレクトリ以下に配置されています。

また、WordPress におけるコンテンツの管理には、SQLデータベースが用いられています。

テーマ

WordPressでは、テーマを変更することで、簡単に全体的なデザインを変更することができます。

MTS日本支部のサイトでは、シンプルでカスタマイズしやすいことで定評があるテーマ「Lightning」を採用しています。

なお、テーマそのもののスクリプト等を直接変更してカスタマイズすると、テーマのアップデートが行われた場合に変更点が失われてしまうため、Lightningの基本デザインを継承する「子テーマ」として「lightning-child」を作成して、この中でデザインや機能のカスタマイズを行っています。

Lightning テーマディレクトリ： "www/wp-content/themas/lightning"
子テーマディレクトリ："www/wp-content/themas/lightning-child"

スタイルシート

サイトのデザインの細かな調整は、スタイルシート（CSS）で行っています。どのように設定されているかは、子テーマ lightning-child ディレクトリ直下の "style.css" を参照してください。

プラグイン

WordPress は、プラグインを導入することで、様々な機能を追加することができます。

MTS日本支部のサイトでは、Lightning で必要とされる標準的なプラグインに加え、以下のプラグインを利用しています。

Postie

メールによる投稿を可能にするプラグインです。

プラグイン設定ページで、投稿先アドレスや投稿を許可するアドレスなどを設定しているほか、拡張フィルタとして、"wp-content" ディレクトリの直下に PHPスクリプト "filterPostie.php" を作成し、投稿の前後に以下の処理を行っています。

プラグイン標準の改行フィルタを有効にすると、どうしてもメールの改行が "<br />" タグに置き換えられてしまう（画面サイズによらず、決まった位置で強制的に改行されるので、表示が崩れてしまう）。このため、プラグインの改行フィルタの設定は無効にして、拡張フィルタによる前処理（postie_post_before）で改行を削除することにより、連続した行を一つの段落にまとめるようにした。
メールに画像ファイルが添付されていない場合は、後処理（postie_post_after）により標準のアイキャッチ画像を設定するようにした。

[ filterPostie.php ]

<?php
function my_postie_post_function_before($post) {
  $search = array(
    "/\r\n\r\n/",
    "/\r\n/",
    "/\n\n/",
    "/\r/",
    "/\n/"
  );
  $replace = array(
    'PARABREAK',
    'LINEBREAK',
    'PARABREAK',
    'LINEBREAK',
    'LINEBREAK'
  );
  $result = preg_replace($search, $replace, $post['post_content']);
  $post['post_content'] = preg_replace('/(LINEBREAK)/', "", $result);
  $post['post_content'] = preg_replace('/(PARABREAK)/', "\n\n", $post['post_content']);

  return $post;
}

function my_postie_post_function_after($post) {
  if ( !has_post_thumbnail($post['ID']) ) {
    set_post_thumbnail( $post['ID'], 1298 );
  }
  return $post;
}

add_filter('postie_post_before', 'my_postie_post_function_before');
add_filter('postie_post_after', 'my_postie_post_function_after');
?>

GTranslate

Google 翻訳を利用して、ページをリアルタイムで翻訳表示するプラグインです。

多数の言語に対応していますが、とりあえず英語のみを有効にしています。

ウィジェットをサイドバー内にコンパクトに表示するため、プラグイン設定ページの「Widget Code (for advanced users)」のウィジェットコードを編集して以下のようにカスタマイズしてあります。（赤字＝追加・変更箇所）

<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" onclick="doGTranslate('ja|en');return false;" title="English" class="glink nturl notranslate"><img src="//www.mtsociety-jp.org/wp-content/plugins/gtranslate/flags/24/en-us.png" height="28" width="28" alt="English" /></a> <a href="#" onclick="doGTranslate('ja|ja');return false;" title="Japanese" class="glink nturl notranslate"><img src="//www.mtsociety-jp.org/wp-content/plugins/gtranslate/flags/24/ja.png" height="28" width="28" alt="Japanese" /></a><style>
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-text-highlight {background-color:transparent !important;box-shadow:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
</style>

<div id="google_translate_element2"></div>
<script>
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'ja',autoDisplay: false}, 'google_translate_element2');}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>


<script>
function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf('goog-te-combo')!=-1){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
</script>
<span class="pwdbygt"><i class="fas fa-exchange-alt"></i> Switch languages...</span>
<div class="pwdbygt">Powered by <a href="https://gtranslate.io/" target="_blank"><img src="/img/gtranslate.png">GTranslate</a></div>

GTranslate プラグインの設定を変更すると、カスタマイズしたウィジェットコードが初期化されてしまう場合がありますので、その場合は、再度上記の修正を行ってください。

また、以下の CSS （style.css内に記述）で、翻訳表示中のみ、ページトップのロゴ以下に自動翻訳である旨の注意書きが赤字で表示されるようにしてあります。

.translated-ltr .navbar-header:after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: rgba(255,0,0,0.5);
    content: "\f071\0020 English pages are automatically translated from Japanese by GTranslate.";
}

Classic Editor

お知らせ記事や固定ページの編集に用いるエディタです。

最新の WordPress の標準として「ブロックエディタ」が用意されていますが、まだ少々使いにくい部分があるので、若干機能は限定されるものの軽快で使いやすい以前のエディタを使うようにしています。（このマニュアルでも、編集作業の例は「Classic Editor」の画面を用いています）

なお、表の作成など、少し複雑なページを作成する場合には、プラグインの設定から「ブロックエディタ」を有効にすることができます。（「管理者」権限が必要です）