Categories
WordPress

To create a BBS by the WordPress plugin bbPress.

同一記事の日本語版
Update information      Edit(Aug.16)    Edit2(Nov.4)    Edit3(2016.Feb.27)

   Since I unified my site CMSes to WordPress, I’ve troubled how I create my BBSes on the both sites of Japanese and English.
   What I want my BBSes is two things, one is the normal BBS features of course and the other is a communication board for some troubles on my home server, for example 403 forbidden, 503 Service Unavailable, etc. Hence the BBSes must exist on other servers than my home server.

   On the English site I first used the comment feature of the single WordPress page for this purpose. It didn’t meet both of my requirements. But, I’ve had few people write comments on it so I’ve left it be.
   On the Japanese site I fist created the BBS by a free Perl scripts named ‘Joyful Note‘. It met both of my requirements, but after I transferred my domain on this February new hosting service brings me no Perl cgi service. So I stopped using Joyful Note, and created a new BBS by PukiWiki. Though this PukiWiki board exists on the other server than my home server, its features as a BBS are very poor.

   About ten days earlier, an inspiration hit me. “I just make a BBS like WordPress.org Forums.” I looked into the site HTML source codes, and then I found the word bbPress. Now, I’ve created my BBSes by bbPress on WebCrow which is a free web hosting service of my registrar.

   By the way, you can find tons of information about bbPress form the old to the new. You shouldn’t refer to the old. bbPress is in progress still now and I think its progress’s been very fast. Now, bbPress becomes one of the normal WordPress plugins, so at its installation you need only a WordPress plugin installation.

   My customization to bbPress is the following things only.

  • On some situations, the color of letters are too light than I can read them. So, I change #ccc & #bbb to # 333 on three places in bbpress/templates/default/css/bbpress.css.

         #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 has no image uploading feature, so I install GD bbPress Attachments. And I customize the following two filters due to convenience for anonymous users.

  • They exist in 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);

   I still have a problem about these two plugins. They have no ENTIRE Japanese language files and I couldn’t find them anywhere. I only translated the visible part for visitors. But, their pot flies include a lot of words, especially bbPress, so my work doesn’t meet the unveiling schedule of BBSes (;´o`).

   By the way, I added six Japanese characters (案内サピプッ) to Untitled1_sub.woff. Well, we can use FontForge on Windows easily, clap clap. At this time, WOFFコンバータ didn’t work well though I don’t know about the reason, so I used ttf to woff converter to renew the Untitled1_sub.woff.

   I move all comments on old BBSes to new ones.

  • Note: bbPress has the time when a user modified a comment (_bbp_last_active_time) on each topic and shows it as a post date. I cannot rewrite them from WordPress Admin Panel, and it is a little bit trouble for old comments. So, I rewrote them as MySQL data.

   Mission complete!! Here new BBSes are. Please feel free to use. m(_”_)m

Edit(Aug.16):
   I found https://translate.wordpress.org/projects/bbpress. It’s cool. I have to get involved!

Edit2(Nov.4):
   If your BBS needs more customization, bbPress Shortcodes might help you. Here is Shortcodes Codex.

Edit3(2016.Feb.27):
   Recently, some language files for bbPress, for example Japanese, are automatically downloaded from Translating WordPress. So you don’t need po nor mo files in the plugin language folder. I don’t remember this feature began to work from when. But it works well now. My WordPress is 4.4.2 and bbPress is 2.5.8 at this point.

Categories
WordPress

To create a WOFF file from my own handwriting-#3.

同一記事の日本語版
Update information      Edit(Jul.17)

New Widgets Title on Japanese blog   Continued from “To create a WOFF file from my own handwriting-#2.”.

   Now, I have the ttf file(Untitled1.ttf) I want. First I’ll make a subset from the ttf file. Actually my ttf file only contains 31 glyph, nevertheless, the subset file is smaller than the original file. So, this work is worthwhile. Second, I’ll make a WOFF file.

   You can find some sites which create WOFFs from ttfs. For example, Webfont Generator, ttf to woff converter, Font2Web, and so on. Some of them can convert full-size characters as well as half-size characters, others cannot. You are able to use command line tools like sfnt2woff. But I found a tool named WOFFコンバータ and can use it on Windows 2000/XP/Vista/7/8 and Mac OS X 10.6 or later. Besides, they distribute a subset font maker named サブセットフォントメーカー, which also works on Windows 2000/XP/Vista/7/8 and Mac OS X 10.6 or later. So, I’ll use it. I greatly appreciate their tools.

  1. Install サブセットフォントメーカー and WOFFコンバータ.
  2. Run サブセットフォントメーカー.   — Fig.1
     
    Explanations of words:
    参照 <--- Browse. 作成元フォントファイル <--- It means "Original File Location & Name". 作成後フォントファイル <--- It means "Subset File Location & Name". フォントに格納する文字 <--- It means "What characters you want the Subset file to include". 書体名を変更する <--- Change Font Name. IMPORTANT!! If a font on your system has the same name, it might be affected by this font.
    作成開始 <--- Make Subset
  3. After 2, WOFFコンバータ runs automatically.   — Fig.2
     
    Explanations of words:
    サンプル文字列 <--- Characters for @font-face Demo 変換開始 <--- Convert to WOFF.

   When this work ends, the tools give me next three files.
     ・Untitled1_sub.html
     ・Untitled1_sub.ttf
     ・Untitled1_sub.woff

   If you open the Untitled1_sub.html by a text editor, you can find the css code you need.

   In my case, I created the WOFF to use for the my Japanese blog Theme which is a child Theme of ‘Sugar and Spice’. So I added the css customization for its style.css. Here is my current style.css in the child Theme folder. Bold and italic parts are new additions. Of course, you have to upload the WOFF file to your server.
   Then the Widget Titles on my Japanese blog have changed their design. See the top image of this post. The WOFF file size is only 10.8KB. Now I have satisfied my own ego trip ha-ha-ha.

   Mission complete!! Clap, clap.

/*
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('Exact URL to Untitled1_sub.woff') 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;
}

Edit(Jul.17):
   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.

Categories
WordPress

To create a WOFF file from my own handwriting-#2.

同一記事の日本語版
Update information      Edit(Jul.17)

   Continued from “To create a WOFF file from my own handwriting-#1.”.

   Now, I can use FontForge. By the way, the fontforge_cygwin-20090914.tar.bz2 on my Windows8 Pro x86 is very unstable. But it works. FontForgeSetup_2012-07-31_Windows.exe didn’t work and fontforge-20090923-1.i386.rpm was more unstable than fontforge_cygwin-20090914.tar.bz2 on my system. There is no turning back. So, I use the fontforge_cygwin. See the edit. You can use FontForge for Windows.
   I first write about creating a ttf file, but note the following points. To follow my procedure probably you have a ttf file and it possibly works. But I do not mention a lot of information to create a full ttf file. So if you want to make a decent ttf file, learn about it by yourself after my method confirmed. You can find more information on Tutorial.
 
**Step by step #2**

  1. Open a cygwin window (by clicking on the cygwin icon).
    $ xinit   — Fig.1

    I have X in a large window.
    [Note] I think you’d better make a working folder for your WOFF. The folder is named MyFont or something like that and placed in cygwinhome<username>. You save your Inkscape SVG files to the folder, which is convenient for your rest work.

  2. $ cd MyFont
    $ fontforge -new   — Fig.2
    I have a new window at the right top corner.
  3. ***Starting to create a font.
    1. I create a Japanese font, so I use a re-encoding feature (JIS 212 (Kanji)).   — Fig.3
    2. ****Creating a half-width character.

      At the first, I make “p” as a half-width character example. Double clicking on the green area.   — Fig.4
      I have another window.   — Fig.5

    3. Use ‘Import’.   — Fig.6
    4. Click ‘Image’ and choose ‘SVG’ from the drop down menu.   — Fig.7, Fig.8
    5. Double click p.SVG.   — Fig.9
    6. Choose ‘Close’.   — Fig.10
    7. “p” is a half-width character, so Use ‘Metric Window’.   — Fig.11
    8. Change the width from ‘1000’ to ‘500’.   — Fig.12
    9. Close ‘Metric Window’.   — Fig.13
    10. Save all I made as a sfd file (default: Untitled1.sfd).   — Fig.14, Fig.15
      [Note] Usually, we don’t need saving at this point, but my FontForge is very unstable. So, I saved all at the point every time just to be on the safe side.
    11. [Note] If you make half-width characters, repeat 2(Fig.4) -10(Fig.15) about all half-width characters you want to make.
       
    12. ****Creating a full-width character.

      I make “ン” as a full-width character example. When making a full-width character, use ‘View’ → ‘Goto’ feature because the finding character place is difficult.   — Fig.16

    13. Copy & paste “ン” in the search form and [OK].   — Fig.17
    14. Double clicking on the yellow area.   — Fig.18
      Repeat from Fig.5 to Fig.8.
    15. Double click U+30F3.SVG.   — Fig.19, Fig.20
      [Note] ‘U+30F3’ is the Unicode for ‘ン’. If available, ン.SVG is convenient for its file name, but, unfortunately this directory menu does not show full-width characters correctly on my system. So I use half-with characters as SVG file names.
    16. Close the window.   — Fig.10
    17. Save all to the sfd file which I made when I created the character “p”.   — Fig.14
    18. [Note] If suspending your creation, do Fig.21, Fig.22, Fig.23.
    19. [Note] If resuming your creation, type “fontforge YourFont.sfd” instead of “fontforge -new”.
    20. Repeat the work above about the characters I want to create. After that I have a sfd file which contains all glyph I want.
    21. Generate and save a ttf file.   — Fig.24, Fig.25
      [Note] Unchecked ‘Validate Before Saving’.
  4. Finaly, I have the ttf file I want.

   The next post I will write how to make a subset file.

Edit(Jul.17):

   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.

Categories
WordPress

To create a WOFF file from my own handwriting-#1.

同一記事の日本語版
Update information      Edit(Jul.17)

Widgets Title on English blog   One of the reasons I chose the Theme “Sugar and Spice” was its Widget title design. Originally, it also provides the same design for blog titles though I don’t use this feature for the title. The name of the font for the designs is Niconne. It is available on Google Fonts and we can use it by this instructions.

Widgets Title on Japanese blog   After changing my Theme to “Sugar and Spice”, I suddenly found the Niconne includes only Latin font. On my Japanese blog the Widget titles are like the right image. Oops. Its Japanese font is dry and boring. Besides, what fonts are used depends on the visitors’ PC environment. Only “w” and “p” are displayed by the Niconne. I don’t like this.

   So I was looking for a Japanese WOFF instead of Niconne, but I couldn’t. At this point, when we use WOFFs of Japanese fonts, we have some specific difficulties. In Japanese texts we use various kind of characters than in Latin texts. A Japanese font file at least contains about 7000 characters. So the size of Japanese font files are much bigger and to create a Japanese font file needs harder work than to create a Latin one. Therefore, to find a free Japanese WOFF is difficult. To use a free Japanese WOFF is also inconvenient because the display of the blog slows down due to its size. Time that gives technology improvements will resolve this issues. But then, I was in trouble.

   Hence I decided to create a WOFF file from my own handwriting. Because I need only 31 characters for my Japanese blog Widget titles(最近の投稿広告コメントタグアーカイブテゴリ日本公式キャラクwp). So, I don’t need a full WOFF of Japanese. Besides, no license problem they have if I make them by myself d(^o^).

   Now, I’ll begin.

**Step by step**

  1. I wrote 31 funny letters by my hand like this ☞ . Ha ha ha.
  2. Scan my handwriting and save it as a png file. If your scanner doesn’t have a saving feature as png files, you need an images converter to make a png file. Of course you can use Inkscape as the converter.
  3. Modify each character to each ping file (1000 pixels x 1000 pixels). Only “p” and “w” are 500 pixels x 1000 pixels.
  4. All this ping files are bitmap image files, so I need to change them to vector image files. Download inkscape-0.48.4-1-win32.7z for my Windows8 x86.
  5. Extract inkscape-0.48.4-1-win32.7z to an appropriate place.
  6. Run inkscape.exe.
    1. Open one of the png files. Click on the image to focus.
    2. To trace a bitmap, call up the Trace Bitmap dialog (Path → Trace Bitmap). Click [OK]. Close the Trace Bitmap dialog.
    3. Simplify path (Path → Simplify). Save it as an Inkscape SVG file.
    4. Rotate rule.Repeat 1-3 about all png files.
      [Note] If you need to create a vector image by manual, keep this in your mind. When you draw outline of the glyph, you do always see the glyph body at the right side and the empty area at the left side. See the right image.
  7. Download setup-x86.exe (32-bit installation) See the edit. You can use FontForge for Windows.
  8. Install cygwin by following FontForge install procedures for cygwin under MS Windows. Actually, I installed and ran FontForgeSetup_2012-07-31_Windows.exe before this. But, unfortunately it didn’t work well on my Windows8 x86.
  9. Run setup-x86.exe.
    • At “Choose A Download Source”, Select “Install from Internet”.
    • At “Install For”, select “All Users”. Avoid the folder that name includes spaces, for example “Program Files”.
    • At “Internet Connection”, select “Direct Connection”.
    • At “Choose A Download Site”, chose a server you prefer.
    • At “Select Packages”, change X11 preference from “Defalt” to “INstall”.
    • Now, install.
  10. Download fontforge_cygwin-20090914.tar.bz2.
  11. Move fontforge_cygwin-20090914.tar.bz2 to cygwinhome<username>.
  12. Install FontForge.
    Open a cygwin window (by clicking on the cygwin icon).

    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. Download mplus_bitmap_fonts-2.2.4.tar.gz.
  14. Move mplus_bitmap_fonts-2.2.4.tar.gz to cygwinhome<username>.
  15. Open a cygwin window (by clicking on the cygwin icon).
    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

   Now, I can use FontForge.

**Ref. URLs
   FontForge install procedures for cygwin under MS Windows (The original page does not exist anymore. This is Internet Archive’s. – 2014.11.7)
   FontForgeを使う (Japanese)

Edit(Jul.17):

   Hey guys, I have good news for you. Now, we can use FontForge for Windows with no pains. At this time, its version is 20-06-2014.