カテゴリー
WordPress

WordPress のプラグイン bbPress で掲示板を作る。

The same article in English
投稿アップデート情報  追記(8/16) 追記2(11/4) 追記3(2016/2/27)

 サイトの CMS を WordPress にまとめて以来,掲示板をどうするかということについて悩んできた。
 掲示板に望む役割は,2つである。ひとつは,もちろん,一般的な掲示板の役目。もう一つは,本家の不具合―例えば, 403 forbidden, 503 Service Unavailable とかいう話―の連絡板としての役目である。したがって,設置場所は,自鯖以外でないと意味がない。

 英語サイトでは, WordPress のページのコメント機能を使ったものを作っていた。これは,上記の希望のどちらも満たしていない。しかし,たいして書き込みもない掲示板だったので,ほったらかしにしてあった(爆)。
 日本語のほうでは,流れで, Joyful Note を使ったものを Xrea 上に作っていた。こっちのほうは,2つとも望み通りになっていたのだが,2月にドメイン移管をしたら,移り先のサービスに Perl cgi がなくて使えなくなってしまった。仕方がないので, PukiWiki で作ってみたのだが, PukiWiki を使い慣れていないこともさることながら, PukiWiki のコンセプトそのものが掲示板になじまないようで,なんとも,情けない姿をさらしていた。

 10日くらい前に,突然ひらめいた。「簡単じゃん,WordPress.org のフォーラムみたいなもんを作ればいい」。早速,サイトのソースを眺めてみたら, bbPress というのが見つかった。そんなわけで, NetOwl 提供の WebCrow に, bbPress を使って掲示板を作ったよ。

 ところで, bbPress に関する情報というのは,ネット上にいやというくらい転がっているのだが,間違っても,古い情報を参考にしてはいけない。 bbPress はすごい勢いで変化してきてみたいで,古い情報は役に立たない。現在の bbPress は,完全に WordPress の一般的なプラグインである。したがって,そのインストールも ごく普通の plugin のインストールなので,他の情報に惑わされないこと。

 私が, bbPress についてカスタマイズしたのは,以下のところだけである。

  • 場合によって,とても読めないくらい字の色が薄いので, bbpress/templates/default/css/bbpress.css の中の3 か所で, #ccc & #bbb を # 333 に書き換えた。

         #bbpress-forums .status-closed,
         #bbpress-forums .status-closed a {
             color: #ccc;
     
         .bbp-forum-header a.bbp-forum-permalink,
         .bbp-topic-header a.bbp-topic-permalink,
         .bbp-reply-header a.bbp-reply-permalink {
             color: #ccc;
     
         span.bbp-admin-links a {
             color: #bbb;

 bbPress には画像添付の機能がないので, GD bbPress Attachments を使うことにした。ユーザ登録しなくても使えるように,以下の2つのフィルターをカスタマイズした。

  • gd-bbpress-attachments/code/attachments/class.php の中にある。
     return apply_filters('d4p_bbpressattchment_is_user_allowed', $allowed);
         ↓
     return apply_filters('d4p_bbpressattchment_is_user_allowed', true);
     
     return apply_filters('d4p_bbpressattchment_is_hidden_from_visitors', $value == 1);
         ↓
     return apply_filters('d4p_bbpressattchment_is_hidden_from_visitors', false);

 困っているのは,2プラグインとも完全な日本語化ファイルがどこにもなかったこと。一応,訪問者に見える部分だけは訳したのだが, bbPress なんて 1000 行以上もあるんだよ。完全訳は,掲示板のお披露目には,間に合わなかった。いつになるんかなぁ,我ながら自信がない (;´o`)。

 それと,「案内サピプッ」の6文字を Untitled1_sub.woff に追加した。 FontForge on Windows が安定して動くようになってて助かった,パチパチ。どういうわけか,今回は WOFFコンバータがちゃんと動かなかったので, Untitled1_sub.woff の更新には, ttf to woff converter を使った。

 古いコメントは,すべて新しい掲示板に移動した。

  • 注) bbPress はユーザーがコメントを弄ると,その時間をトピックごとに覚えていて (_bbp_last_active_time) ,経過時間として表示する。これは,移動した古いコメントには,そぐわない情報である。 WordPress の管理画面からは,この値を書き直せなかったので, SQL データを書き換えてやった。

 任務完了!! 掲示板はこちらです。お気軽にご利用ください m(_”_)m。

追記(8/16):
 こんなの見つけた。 https://translate.wordpress.org/projects/bbpress
 すごいなぁ。いろいろ時代に遅れてるなと感じてしまう。アクセスしてみよう!!

追記2(11/4):
 うちの掲示板はほとんどカスタマイズしていないが, bbPress では何種類かショートコードが使えるので,役に立つかもしれない。 bbPress のショートコード

追記3(2016/2/27):
 bbPress の日本語ファイルは, Translating WordPress から自動でダウンロードされる。従って,プラグインの language フォルダには, po も mo もいらない。いつからかははっきり記憶していないので,この機能が働く最低バージョンは書けないが,現時点ではうまく動いている。この追記を書いている時点での最新は WP4.4.2 と bb2.5.8 である。

カテゴリー
WordPress

自作 WOFF を作ってみた-#3。

The same article in English
投稿アップデート情報  追記(7/17)

New Widgets Title on Japanese blog 「自作 WOFF を作ってみた-#2。」の続きです。

 前回で, ttf ファイル(Untitled1.ttf)を手にしたので,これから, WOFF ファイルを作る。まず,サブセット化し,後に WOFF ファイルを作る。実のところ,できた ttf には 31 文字しか含まれていないのだが,それでもサブセット化すると小さくなったので,この作業もやる意味はある。

 ネット上に,結構いくつも, ttf から woff を作ってくれるサイトがある。例えば, Webfont Generator とか ttf to woff converter とか Font2Web とか。日本語に対応しているところもあるし,対応していないところもある。コマンドライン系のツールで, sfnt2woff などもある。しかし,今回,私は武蔵システムが配布している WOFFコンバータという Windows 2000/XP/Vista/7/8 でも Mac OS X 10.6 以降でも動くありがたいソフトを使った。彼らはさらに,サブセットフォントメーカーまで配布してくれている。ありがたく使わせていただいた。本当に,感謝に堪えない。

  1. サブセットフォントメーカー と WOFFコンバータをインストール。
  2. サブセットフォントメーカーを実行。   — Fig.1
  3. 2が済むと, WOFFコンバータ が自動的に起動する。   — Fig.2

 以下の3つのファイルが作られる。
     ・Untitled1_sub.html
     ・Untitled1_sub.ttf
     ・Untitled1_sub.woff

 Untitled1_sub.html をテキストエディタで開けてみれば,必要な css コードは分かる。

 私の目的は,この WOFF を ‘Sugar and Spice’子テーマで―これをこのブログのテーマに使っているのだが―使うことだから,必要な変更を style.css に書き加えた。現時点の子テーマの style.css を以下に載せておく。太字の斜字体部分が今回の変更点である。当然ながら WOFF ファイルは,サーバにアップロードしておかなくてはならない。
 で,ウィジェットタイトルは,どんなふうになったかというと,この記事の右上の画像のように変わったわけだ。 WOFF ファイルのサイズはわずかに 10.8KB である。まぁ,なんちゅうか,自己満足の世界だけどねぇ (エへへ)。

 任務完了!! 拍手うーーーーーー。

/*
Theme Name: J blog
Theme URI: http://webtuts.pl/themes/sugar-spice
Description: sugarspice Child Theme
Author: Aleksandra Laczek
Author URI: http://webtuts.pl
Template: sugar-and-spice
Tags: light, white, gray, two-columns, fixed-layout, responsive-layout,
custom-background, custom-menu, featured-images, theme-options, threaded-comments,
translation-ready, full-width-template
Text Domain: sugarspice-child
*/

@import url("../sugar-and-spice/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
@font-face {
font-family: 'MyFont';
src: url('Untitled1_sub.woff の URL を記入') format('woff');
}

body {
color: #000;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
color: #000;
}

/* Calendar Widget */
table th,
table td{
color: #000;
background: transparent;
border: none;
text-align: left;
}

.widget-title em {
font-family: 'MyFont';
font-size: 26px;
font-style: normal;
padding-left: 3px;
}

/* 07. Forms & buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: #000;
}

/* #Forms */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
color: #000;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
color: #000;
}

label span,
legend span {
color: #000;
}

追記(7/17):
 みなさーん,いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは, 20-06-2014 みたい。

カテゴリー
WordPress

自作 WOFF を作ってみた-#2。

The same article in English
投稿アップデート情報  追記(7/17)

 「自作 WOFF を作ってみた-#1。」の続きです。
 やっと, FontForge が使えるようになったんだが, fontforge_cygwin-20090914.tar.bz2 くん,とにかく不安定。でもまあ,なんとか動く。 FontForgeSetup_2012-07-31_Windows.exe では,エラーが出たし, fontforge-20090923-1.i386.rpm は,さらに不安定だった。というわけで,ほかに道もなさそうなので, fontforge_cygwin で行く。 FontForge for Windows が使えるようになっているので,そちらを使ったほうが早い。追記参照。
 ところで, ttf ファイルの作り方を書いていくわけだが,ここを参考にする方がいたら,以下のことに留意しておいてほしい。手順通りにやれば,多分使えるレベルの ttf ファイルはできると思う。しかし,今回私が必要とするのは,大したものではないので,ちゃんとした ttf ファイルを作るために必要なことの多くを書いていない。もし,ちゃんとしたものを作ろうと思うなら,ご自分で更なる情報を集めていただきたい。手前味噌だが,一通り私の手順をやってみてからのほうが,下記のチュートリアルに書いてあることが飲み込みやすいと思う。
 FontForge についての詳しい話は,チュートリアルにあります。
 
**地道に #2**

  1. cygwin を実行 (cygwin のショートカットをクリックする)。
    $ xinit   — 図1

    X の大きな窓が開く。
    [注] WOFF のために,作業フォルダを作っておいたほうがよい。名前は MyFont とでもして, cygwinhome<username> に置く。 Inkscape SVG はすべてこの中に入れておくと,後の作業に便利である。

  2. $ cd MyFont
    $ fontforge -new   — 図2
    右上隅に新しい窓が現れる。
  3. ***フォントの作成開始
    1. 日本語フォントを作るので,Reencode を使って JIS 212 (Kanji) にする。   — 図3
    2. ****半角文字の作成

      例として半角文字の “p” を作る。緑色にしてあるところをダブルクリックする。   — 図4
      さらに,別の窓が左側に現れる。   — 図5

    3. ‘Import’を使う。   — 図6
    4. ‘Image’ をクリックして,出てきたドロップダウンメニューから ‘SVG’ を選択する。   — 図7図8
    5. p.SVG をダブルクリック。   — 図9
    6. ‘Close’ する。   — 図10
    7. “p” は半角文字なので ‘Metric Window’ を使って幅を縮めてやる。   — 図11
    8. 幅を ‘1000’ から ‘500’ に変更。   — 図12
    9. ‘Metric Window’ を閉じる。   — 図13
    10. ここまでの作業を sfd file (default: Untitled1.sfd) に保存する。   — 図14, 図15
      [注] FontForge がちゃんと動けば,ここでの保存作業必要ないのだが,うちの環境では,なにしろ,不安定だったので,こまめに保存した。
    11. [注] 半角文字を作るときは, 2(図4) から10(図15) の繰り返しになる。
       
    12. ****全角文字の作成

      全角文字の例として, “ン” を作る。全角文字を作るときは, ‘View’ → ‘Goto’ の機能を使う。文字の場所が見つけにくいからね。   — 図16

    13. “ン” を検索窓にコピー&ペースト後,[OK]。うちの環境では,キーボードから直に “ン” の入力はできなかった。   — 図17
    14. 黄色くなっているところをダブルクリック。   — 図18
      図5から図8をやる。
    15. U+30F3.SVG をダブルクリック。   — 図19図20
      [注] ‘U+30F3’ は’ン’のユニコードである。可能なら,ン.SVG とかのほうが便利なのだが,うちの環境では, FontForge 内では文字化けした。仕方がないので,半角文字でのファイル名になった。
    16. 窓を閉じる。   — 図10
    17. 前に作った sfd ファイルに,ここまでの作業を保存する。   — 図14
    18. [注] 作業を中断する場合は,図21図22図23 をやって, cygwin を抜ける。
    19. [注] 作業の再開時は, “fontforge -new” の代わりに, “fontforge 自分の sfd ファイル名” をタイプすると,前の sfd ファイルが使える。
    20. 必要な文字分,作業を繰り返す。最終的に,必要な glyph を含んだ sfd ファイルができることになる。
    21. さて, ttf を作る。   — 図24図25
      [注] ‘Validate Before Saving’ のチェックは,外しておく。いろいろ,検査をしてくれるみたいだが,今の場合は,外しておいたほうが,無難です。
  4. やっと, ttf ファイルができた。

 次回が,最終回になります。

追記(7/17):

 みなさーん,いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは, 20-06-2014 みたい。

カテゴリー
WordPress

自作 WOFF を作ってみた-#1。

The same article in English
投稿アップデート情報  追記(7/17)

Widgets Title on English blog テーマを “Sugar and Spice” に決めた理由の一つに,ウィジェットのタイトルデザインがあった。もともとは,ブログタイトルにもこのデザインが使われるようになっている。これに使われているフォントは Niconne という名前の Google Fonts で,使い方はこの辺にある。

Widgets Title on Japanese blog 間抜けな話だが, Niconne にはアルファベットと数字しか入っていないので,日本語ブログのほうの表示は,右図のようなことになってしまった。無味乾燥だし, wp だけが Nicconne なので,余計変に思える。日本語表示のほうは当然ビジターの環境に左右されるわけだ。これは,ヤダ,と思った。

 なんか使えるもんがないかと探してみたんだが,日本語というのが足を引っ張る。文字数の多さとファイルの馬鹿でかさ。はじめのころのパソコンと同じ理由だ。 NEC のパソコンなんて,漢字ROM が入ってましたからね。
 作るのが大変なため,無料で利用できるものが非常に限られる。丸ごと, WOFF にして乗っけると,ファイルのでかさのため,ブログの表示速度にも影響する。そのうち,パソコンの漢字ROM 同様,技術が解決してくれるだろうが,今は,間に合わない。

 で,自分で作ることにしちゃったのヨ。いるのは,(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp)の31文字だけだから,サブセット化ということをやれば,自鯖でも行けそうだから d(^o^) 。

 はじめまっせ。

**地道に**

  1. 31 文字を手書きした。字に自信はないので,もとから変な形にした。ハハハ。右のタイトルの字をご覧あれ。
    テーマを替えちゃったので、サイドバーに自作の文字がなくなったのを忘れてた。こんなのだったんだよ。 ☞
  2. 書いた文字をスキャンして, png ファイルにする。 jpg でしか保存できないなら,コンバータがいる。後で, Inkscape をインストールするから,これをコンバータにしてもいい。ちょっと,使いにくいが。
  3. 1文字ずつ, 1000 pixels x 1000 pixels の png ファイルにする。 “p” と “w” は 500 pixels x 1000 pixels。
  4. できた png のは,ビットマップファイルなので,ベクターイメージファイルに変える必要がある。 inkscape-0.48.4-1-win32.7z をダウンロードする。うちのは Windows8 x86 用です。
  5. inkscape-0.48.4-1-win32.7z を適当な場所に展開する。
  6. inkscape.exe を実行。
    1. png を1枚開く。画像上でクリックして,フォーカスを当てる。
    2. ビットマップをトレースする。メニューバーから (パス → ビットマップをトレース)をやると,トレースビットマップの窓が現れる。 [OK] をクリック。窓を×で閉じる。
    3. パスを簡略化する。 (パス → 簡略化する),これだけ。 Inkscape SVG として,ファイルを保存。
    4. Rotate rule.1-3 を png ファイル分繰り返す。
      [注] 手作業でベクターイメージを作る場合には,次のことに気を付けること。右図で矢印方向に進むとき,右側が文字エリア,左側が空白エリアである。これが狂うと,ちゃんと字にならない。
  7. setup-x86.exe (32-bit installation) をダウンロード。 FontForge for Windows が使えるようになっているので,そちらを使ったほうが早い。追記参照。
  8. cygwin をインストールする。 FontForgeSetup_2012-07-31_Windows.exe があるんだが,残念ながらうまく動かなかったので, cygwin 版を使うことにした。
  9. setup-x86.exe を実行。
    • “Choose A Download Source” では “Install from Internet”。
    • “Install For” では “All Users”。空白を含む場所は避ける。たとえば, “Program Files” などはやめたほうがいいらしい。
    • “Internet Connection” では “Direct Connection”。
    • “Choose A Download Site” では,どっか好きなとこ選んで。
    • “Select Packages” では, X11 を “Defalt” から “INstall” に変更。
    • で,インストール。
  10. fontforge_cygwin-20090914.tar.bz2 をダウンロードする。
  11. fontforge_cygwin-20090914.tar.bz2 を cygwinhome<username> に移動する。
  12. FontForge のインストール。
    cygwin を実行 (cygwin のショートカットをクリックする)。

    1. $ bunzip2 fontforge_cygwin-*.tar.bz2
    2. $ tar xf fontforge_cygwin-*.tar
    3. $ cd fontforge
    4. $ ./doinstall
    5. $ cat >> ~/.bashrc
      PATH=${PATH}:/usr/local/bin ; export PATH
      MANPATH=${MANPATH:-}:/usr/local/man ; export MANPATH
      export LANG=ja
    6. $ exit
  13. mplus_bitmap_fonts-2.2.4.tar.gz をダウンロードする。
  14. mplus_bitmap_fonts-2.2.4.tar.gz を cygwinhome<username> に移動する。
  15. cygwin を実行 (cygwin のショートカットをクリックする)。
    1. $ tar zxvf mplus_bitmap_fonts-2.2.4.tar.gz
    2. $ cd mplus
    3. $ ./install_mplus_fonts
    4. $ cd ..
    5. $ cat >> ~/.bashrc
      xset fp+ /usr/X11R6/lib/X11/fonts/mplus
    6. $ exit

 やっと, FontForge が使える。

**参考サイト
   MS-Windows 上の cygwin への FontForge のインストール手順
   FontForgeを使う

追記(7/17):

 みなさーん,いいお知らせです!! FontForge for Windows が普通に動くようになってるよぉ。現時点のバージョンは, 20-06-2014 みたい。