[WordPress] TwentySixteenの導入:子テーマをカスタマイズ


前回子テーマの作成に成功したので、今度は子テーマをカスタマイズしていこうかと。

と言いつつ、子テーマのカスタマイズって実際にはどのように手をつけたらいいのか・・・さっぱりわからない・・・。
「子テーマのstyle.cssを優先して、足りない部分を親テーマのstyle.cssで補完する」というようなイメージでぼんやりとらえていたけど、本当にそれで合っているのか??

「子テーマ」「カスタマイズ」等で検索しても、子テーマ作成の方法だけの記事がぶわーーーっと出てきて、「作成した後どうするか」を解説してある記事がなかなか見つからず、やっとこさ発見しました。

バイラルクラブ – wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

一般的には、親テーマの内容を全コピーして、カスタマイズしたい部分だけ、変更・追記していく形が良いでしょう。

アフィリエイトで稼ぐ方法を全部話そうと思う – WordPressでフォントや文字大きさ、行間をカスタマイズ
style.cssに関しては、「全コピーして必要な箇所だけを変更・追加」ではなく、「最初に作った状態に追記」という形でいいようです。

とりあえず試しに、上記サイトで例として書かれているフォントの変更にチャレンジ。
・・・してみたものの、記事本文が明朝体のまんま!!

原因究明のため、続く・・・

[WordPress] TwentySixteenの導入:子テーマ編


WordPressもバージョン4になり、新しい公式テーマも追加されたので、思い切ってTwentySixteenのカスタマイズに着手することにしました。
今まではものぐさなことに親テーマをそのまま書き換えてテーマをカスタマイズしていましたが、「子テーマを作ってカスタマイズするのが推奨されている」と聞き、慌ててまずは子テーマ作りに着手。

そもそも子テーマとは何なのか・・・
カスタマイズしたいテーマ(今回はTwentySixteen)を親として作成し、親テーマを直接カスタマイズするのではなく、子テーマ側をカスタマイズすることによって、TwentySixteenがアップデートされた時でもカスタマイズした箇所が変更されてしまわないようにするもの。らしいです。

「子テーマ作成」で検索すると山ほど解説してくださっている記事が見つかると思いますが、個人的には一つの記事だけではなくいくつかの記事をマルチに参考にすることをお勧めしたいです。なぜかと言うと、ハマったから。
必要なコードが抜けていたり、コードが全角で表示されてしまっていて丸ごとコピペしたら失敗した、という記事もあったのでね!

子テーマの作り方

コマンドラインの使えないレンタルサーバなので、FTPでやりました。

(1):まずはFTPソフトでWordpressがインストールされているディレクトリに移動、wp-contentディレクトリ内のthemesディレクトリの中に子テーマのディレクトリを作成する。
子テーマの名前を決めてそのテーマ名のディレクトリを作成します。「twentysixteen」の子テーマだから「twentysixteen-child」にするとわかりやすいよ!という記事が多いですが、別に好きな名前をつけてOK。今回は「twentysixteen-child」にしてみた。

(2):「style.css」という空のテキストファイルを作成。中に書く内容はこちらを参考にしました(xserver用の解説だけどコードの部分はこれを使わせて頂きました)。
  ここで文字コードと改行コードに注意せなあかんようです。文字コードはデータベースサーバをUTF-8にしたのですが、Wordpressの場合は「BOMなし」というのが標準らしく、Terapadの「文字/改行コード指定保存」で「UTF-8N」と「LF」を選択して保存しました。詳しくはこちら

(3):「functions.php」という空のテキストファイルを作成。中に書く内容はstyle.cssと同じくこちらを参考にしました。

(4):(1)で作成したディレクトリ(今回はtwentysixteen-child)に、(2)と(3)で作成したstyle.cssとfunctions.phpをアップロードする。
(5):Wordpressのダッシュボードにアクセスし、外観>テーマを選択。(2)で設定したテーマ名の項目ができているはずなので、「有効化」をクリックするとサイトに反映される。

以上で作成は完了!

自分の場合は先ほど書いた「コードを丸ごとコピペしたら全角が入っていておかしくなった」「改行コードと文字コードがおかしかった」の2点で最初は失敗しましたが、最終的には作成できました。

続く。

【EC-CUBE】 検索機能で商品名以外も検索対象にする方法


EC-CUBEのデフォルトの検索(サイドバーに表示されている「商品名を入力」の下の検索フィールド)では商品名と検索ワードしか検索対象にしてくれないようです。
eccube-search
試してみたところ、検索ワードすら対象にしていないような気もしましたが・・・

これではもっとあいまいな検索(例えば「使いやすい」とか「プレゼントに」とか「人気」とか)ができず、検索機能としては弱いと言わざるを得ない。
そこで商品名や検索ワードだけでなく、商品説明も含めて検索できるようにしたい!と思い、検索したら方法が見つかりました!

ヒロシの日記 | EC-CUBE 2.11.1で検索キーワードに一覧と詳細ページの文章も含める。

こちらの記事ではバージョン2.11.1での改変場所を紹介して下さっていますが、バージョン2.13.1でもほぼ同じでした。
(LC_Page_Products_List.phpの444行目と書いてありますが、2.13.1では401行目付近でした。それ以外の差はありませんでしたよ)
ちなみにLC_Page_Products_List.phpは、data/class/pages/productsのディレクトリにありました。

これを書いて下さっている通りにLC_Page_Products_List.phpに追記してアップロードし直したらすぐに検索結果がぶわっと増えました!ぶわっと。
例えば、今までは「レトロな」で検索しても0件ヒットだったのが(まぁ商品名に「レトロな」を含んでいるものがなかったので当たり前ですが…)、商品説明が検索範囲に加わったことで15件になりました。素晴らしい・・・

phpに詳しくなくても見たまま追記してアップロードするだけなのでとても簡単です。
ヒロシさんありがとうございました!

【Mediawiki】 出典機能の追加


Wikipediaでよく見る、というかほぼ必須のように推奨されている出典・脚注機能
http://ja.wikipedia.org/wiki/Help:%E8%84%9A%E6%B3%A8
に詳しく書かれていますが
mediawiki_ref
こんな感じの機能。

しかし、MediaWiki 1.21にはバンドルはされているものの、設定をしないと使えないようです。

解説はこちらのページ。

方法はLocalSettings.phpに、

require_once "$IP/extensions/Cite/Cite.php";

を追記して、サーバにアップロードするだけ。

追記する場所ですが、LocalSettings.phpの末尾に

# End of automatically generated settings.
# Add more configuration options below.

自動で生成された設定の最後の部分です。追加の構成設定をこの下に追加して下さい。(意訳^_^;)
という文章があるので、この下に(つまり一番下に)追記しました。

結果、

MediaWiki はPHP言語で書かれたフリーソフトウェアでオープンソースのウィキパッケージソフト。MediaWiki.org へようこそ - [http://www.mediawiki.org/wiki/MediaWiki/ja>http://www.mediawiki.org/wiki/MediaWiki/ja]

== 出典 ==

これが
mediawiki_ref2
このように表示されるようになりました~

【Mediawiki】 サイドバーのカスタマイズ


Seesaa Wiki(旧Livedoor Wiki)から移行してみて、いろいろとMediawikiにも制約が多いなーと思ったのですが、今一番なんとかしたいのはサイドバー部分。

ブログやレンタルWikiに慣れていると、なんというかこう・・・味気ない。
というよりも、何かサイドバーに求めてる機能(目次みたいな)が全然ない感じ。

一般的なブログやレンタルWikiだったらサイドバーに「最近更新されたページ」とか「カテゴリー」とか、そういうサイト内を回るのに便利なメニューがあるけど、Mediawikiではどちらかというと「これわざわざサイドバーに必要?」みたいなものばっかり表示されてる気がする(※あくまで個人的な意見です)。

いろいろ調べた結果、サイドバーに「最近更新されたページへのリンクを何件かリストとして表示」ということはできないらしい。なんだかサイドバーには引数が使えないとか。詳しく調べてないですが・・・

サイドバーに何を表示させるかということは追い追い考えるとして、とりあえずはサイドバーのカスタマイズ方法。

参考URL:
http://www.fukudat.com/wiki/ja/mediawiki
http://www.cudo29.org/mediawiki.html

サイドバーの編集ページを表示させるには、まず
http://MediaWikiを設置したディレクトリ/index.php?title=MediaWiki:Sidebar
をブラウザで開きます。
すると通常の記事のように、右上に「編集」タブが出ているので、それをクリック。
これで編集画面が表示されます。

しかし、なんだか異様な雰囲気・・・

* navigation
** mainpage|mainpage-description
** portal-url|portal
** currentevents-url|currentevents
** recentchanges-url|recentchanges
** randompage-url|randompage
** helppage|help
* SEARCH
* TOOLBOX
* LANGUAGES

↑こんな感じのものが表示されているはず。

↓日本語の設定でインストールしていると、実際には勝手に日本語化されたものが表示されてますもんねぇ。
wiki_sidebar
(※スキンは「Cavendish」を使用中です)

それに、通常の記事ページならウィキ内リンクは[[ページ名|表示名]]という形で入力するのに、[[]]が見当たらないのもなんだかソワソワする。
「ページ名|表示名」 という形式で入力するのは通常記事と一緒だけど、ページ名と表示名が一緒の場合でも「ページ名|ページ名」 とわざわざ入力しないとリンクが張られないみたいです。うーんイレギュラー。

ちなみに、何か修正してから「履歴」で以前の版を見ても、上記のデフォルトの*navigation~というものは表示されないようです。プレビューもプレビューとして成立してないし(笑)、特殊なページなんですかねやっぱり。

*の行がボックスの見出し、**の行がボックスの中のリストに相当するようなので、例えば

* メニュー
** メインページ|メインページ
** このサイトについて|このサイトについて
** FAQ|FAQ
* カテゴリ
** CGI・PHP|CGI・PHP
** HTML|HTML
** CSS|CSS
** 猫|猫関連記事

↑こんな感じで記入すると

↓こう表示される模様。
wiki_sidebar2
「メニュー」は「案内」に、「FAQ」という単語は「よくある質問と回答」に勝手に置き換えられるみたいですね。

ちょっとクセはありますが、カスタマイズはなんとかできそうな気がします!

【WordPress】 HTMLやPHPのコードを直接表示するプラグイン「Crayon Syntax Highlighter」


WordPressの記事内にソースコードを記入すると、普通に直接記入したままではどえらいことになってしまいます・・・
HTMLなどを文字列でなくHTMLコードとして読み込んでしまう仕様なので仕方がないですが、これはなんとかしたい。

ということで、プラグインを探しました。
それらしきプラグインは沢山あったのですが、まず「Syntax Highlighter Compress」というのを使ってみました。

syntaxhighlighter
これです。
結果、ソースコードの部分をコード名を使ったタグのようなもので囲む(※HTMLのコードなら[HTML]~~[/HTML])、というのがネックで・・・。めんどくさがりなのでコードの種類をわざわざ書き分けるのすらめんどい。しかも何故かWordpressのコードを表示させようとしてもマトモに動かず・・・

その後、こちらを見て「Crayon Syntax Highlighter」を使うことに決定!

表示デザインのカスタマイズができることももちろん嬉しい機能ですが、わざわざコードに合わせて[HTML]だの[CSS]だの書き分けなくても[crayon][/crayon]で囲むだけ!っていうのもめんどくさがりにはうってつけ。
しかもちゃんと投稿画面の上のビジュアルエディタ(って言うんですかね)にも「crayon」のボタンが出てる!やった!!

インストールは本当に簡単で、ダッシュボードの「プラグイン>新規追加」で「Crayon Syntax Highlighter」を検索し、
crayonshl出てきた該当プラグインの「いますぐインストール」をクリック→インストール完了画面の「有効化」をクリックするだけ!

そして記事投稿画面で、コードをそのまま表示させたい部分を[crayon]と[/crayon]で囲むだけ。

すると
crayon_code
こんな感じに表示されます。おおお簡単・・・!
直接コピペしても行番号はコピーされない、っていうのも当たり前のようだけど便利。

デザインの変更も簡単で、プラグインインストール後にダッシュボードのサイドバー(?)の「設定」に「Crayon」という項目が増えるので、そこからけっこう大幅にカスタマイズできます。
上の例のフォントはなんとなく気に入らない(もっとかっちりしたフォントがいい)ので、変更しようかな。


参考URL: