カテゴリー別アーカイブ: WordPress

WordPress

WordPressテーマSTINGER3をWPML(3.1.5)対応にする

< WPMLとは >
このサイトでも使用していますが、WordPressを多言語対応にする有料プラグインです。
WPMLオフィシャルサイト

< STINGER3とは >
プラグイン無しでも機能豊富なWordPress用テーマです。Google Adsenseの埋め込みなどが最初から考慮されていて、ソーシャルボタンなども標準装備なスマホ対応テーマです。かねてより使ってみたいと思っていました。
STINGER3公式サイト

< 対応させるコード >
以下がSTINGER3をWPMLに対応させるためのコードです。

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj=$('.submenu-languages').eq(0);
var wpmlMobile=(typeof(window.orientation)!='undefined');
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< コード挿入方法 >
以下、3パターンご紹介します。いずれかの方法で反映してみてください。

< 方法 – 1 >
WordPress管理メニューの [ 外観 – ウィジェット ] で 「テキスト」を任意の(ただし有効な)エリアに追加します。タイトルは入力せず、内容のところにコードを記述すれば有効になります。

< 方法 – 2 >
手前味噌ですが私が作成したプラグイン STINGER3 loves WPML を使用します。このプラグインも実際にやっていることは同じでstyleタグとscriptタグの挿入です。このプラグインについてのバグ報告などはGithubまたはTwitterまたはGoogle+へお願いします。

< 方法 – 3 >
WordPressプラグイン Wp Insert を使用します。こちらはあらゆる場所に任意のHTMLコードを挿入可能なプラグインですので、Google Adsenseなどのために既に導入済みの方や、任意の場所に他のコードも挿入したい方などにはオススメです。

< あとがき >
どの方法にしても特に難しいことは無いかと思います。ただ、STINGER3自体は今のところ言語ファイルに未対応なため、moファイルなどでの多言語化はできず、WPMLのストリング翻訳でやるしかない現状です。このへんのカスタマイズも今後考えていこうかと思います。

< 2014/06/11 アップデート >
Android/iOSのブラウザで初回タップイベントが正常にハンドリングできていないバグを修正。当ページ内のコピペ用ソースおよびGithub上のプログラム修正。

AndroidアプリKSWEBを使ってWordPressサイトを構築

< ご注意 >
この投稿に記載している内容とは別に、Androidマシンをインターネット上に公開するためのネットワーク設定の知識が必要です。ネットワーク設定はハードウェアやソフトウェアのみならずプロバイダによっても異なります。申し訳ありませんが別のサイトなどで調べるなどしていただきますようお願いします。

< ステキなAndroidアプリ >
Google Playにステキなアプリがあります。KSWEBというアプリです。開発者様のページはここです。 アプリはこのページからダウンロードするかGoogle Playからインストール可能です。

< 必須スペック >
KSWEB公式サイトによると、Android device with OS version 2.3.3 or higher and ARM-based processor is requiredとの記載があります。私はauのかなり古い機種IS05で試しましたので、この記事はIS05での内容に即したものとなっています。ただ、KSWEB自体はほとんどのAndroidデバイスで実行可能かと思いますので、せひお持ちのAndroidマシンでお試しください。

< Google Playからのインストール >
( こちらはGoogle Playからのインストール手順です。 )
KSWEB – Google Playからインストールしてください。簡単ですが以上です。

< APKファイルからのインストール >
( こちらはAPKファイルからのインストール手順です。 )
APKファイルからインストールする場合、インストール前に「提供元不明のアプリ」のインストールを許可する必要があります。設定変更が済んだら http://kslabs.ru/download/ からKSWEBのAPKファイルをダウンロードしてください。.
allow_unknown_sources_ja

< WordPressのダウンロード >
Androidで直接ダウンロードする方法と、パソコンでダウンロードした後でAndroidマシンにアップロードする方法があります。私の場合はパソコンを使用しました。まず http://ja.wordpress.org/ からWordPressをダウンロードし、Androidマシンには AirDroid をインストールしておきます。パソコンのブラウザで http://web.airdroid.com/ を開くとファイルのアップ/ダウンロードを含め、Androidマシンとのさまざまな連携が可能ですので、WordPressのZIPファイルをAndroidに転送します。Androidマシンで直接ダウンロードされる場合は、Androidマシンに入っているブラウザで http://ja.wordpress.org/ からダウンロードするだけです。

< ZIPファイル解凍アプリをAndroidへインストール >
WordPressのZIPファイルをAndroid上で解凍しますので、Android用ZIP解凍アプリが必要です。私は AndroZip™ File Manager をインストールしましたが、他にも数えきれないほどのZIP解凍アプリがGoogle Playにはありますので、お好きなものをインストールしてください。

< ZIPファイルの解凍 >
私の場合はZIPファイル “wordpress-3.9.1-ja.zip” をSDカードのルートに置きました。解凍すると自動的に “wordpress” というディレクトリができました。
20140531-205341

< 機能の追加 >
[ TOOLS – WebFace – Start ] をタップして KSWEB Web Interface を有効化します。 さらに [ TOOLS – Main – phpMyAdmin ] をタップして phpMyAdmin を追加します。ただ、phpMyAdminはWordPress用のデータベースをMySQLに作成するために使うだけですので、知識のある方はPHPスクリプトでやってしまっても良いでしょう。
20140530-002435

< phpMyAdminでデータベース作成 >
Androidマシン自体で行う場合は http://localhost:8000/ にアクセスします。LAN内の別マシンから実施する場合は http://< AndroidのローカルIPアドレス >:8000/ にアクセスします。
phpMyAdmin_login
ユーザ名は root でパスワード無しでログインできます。私の場合、”wordpress” という名前のデータベースを作成しました。
phpMyAdmin_table

< lighttpdのWWW公開ディレクトリを変更 >
Androidマシン自体で行う場合は http://localhost:8003/ にアクセスします。LAN内の別マシンから実施する場合は http://< AndroidのローカルIPアドレス >:8003/ にアクセスします。これが KSWEB Web Interface の画面で、デフォルトではユーザ名・パスワードともに admin でログイン可能です。
KSWEB_Web_Interface
Server settingsをクリックするとlighttpdの設定ファイルが編集できます。
そこで次のような行をみつけてください。

server.document-root = “/mnt/sdcard/htdocs”

ここのパスをご自分のWordPress解凍先にしてください。
私の場合はこんな感じにしました。

#server.document-root = “/mnt/sdcard/htdocs”
server.document-root = “/mnt/sdcard/wordpress”

設定変更して保存したらlighttpdもしくはKSWEBを再起動してください。

< lighttpdのポート設定 >
デフォルトの設定は以下の通りです。
lighttpd_ports
変更したい場合は設定ファイルを編集してください。

< 寝たらイカン! >
基本的にAndroidスマホは放っておくとスリープしてしまいます。もし24時間稼働させたい場合はスリープしないようにしなくてはなりません。Google Playはそのようなアプリがいくつもあるようです。StayAwakeKeepScreenもしくはご自分でお好きなアプリを見つけてご使用ください。

< WordPress稼働 >
コレ以降の手順は一般的なWordPressのインストールと同じになるため割愛させていただきます。お好きなドメインなどに紐づけてインターネットに公開したりLAN内でテスト用にしたりと、省エネWordPressマシンをご活用ください。