IT・AI・DX,日々雑感

WordPressをカスタマイズする

WordPressのテーマをTwenty Elevenから,Lovecraftに変えてみたので,必要となるWordPressのカスタマイズの前提知識についてまとめておく。なお,テーマが変えられないとぐずぐずしていた半年ほど前に「WordPressを使う」を書たことを思い出したが,この記事に引き続いて読むと,全体像が分かりやすいだろう。

WordPressをカスタマイズする方法は,5段階に分けることができるとされている(「WordPressのツボとコツがゼッタイにわかる本」)。これは,WordPressのテンプレートである「テーマ」を使用することを前提にすると考えていいのだろう。

1「管理画面(ダッシュボード)だけを使ったカスタマイズ」,2「スタイルシート(CSS)を使ったカスタマイズ」,3「テンプレートのHTMLを変更するカスタマイズ」,4「テンプレートタグを使ったカスタマイズ」,「WordPressのPHP関数を駆使したカスタマイズ」である。

私は,WordPress.comを利用しているので,1,2が分かれば十分だが,サーバーでWordPress.orgを運用する場合は,3~5を利用する場合もあろう。実はWordPress.comを利用していても「外観」の「テーマの変更」で,3~5も可能なのだとは思うが,それが抵抗なくできるのであれば,WordPress.comを利用しないだろう。WordPress.comは,すぐに無料で利用し始めることができ,WordPressの最新版に対応していて,セキュリティーの面でも安心して利用できるから,趣味でWeb,ブログを開設,運用するには,これで十分だろう。

ただ上記1,2のプラグインやテーマのインストールを,WordPress.comで不自由なく実行するためには(プラグインが利用できるようになったのは比較的最近だ。),ビジネスコースが必要だが,これは月額2900円するので,さてどうしよう。面倒くさがりの結論は,WordPress.comとなる。

具体的なカスタマイズ

さてWordPress.com(ビジネスコース)を利用する場合,テーマを選択し,投稿記事,固定ページ記事を作成する等,WordPressに用意された通常の機能を利用することになる。このレベルは基本的な解説書に書いてあるのでそれをざっと読むことになるが(「今すぐ使えるかんたんWordPress入門」,「いちばんやさしいWordPressの教本」等。「WordPressを使う」にも紹介している。)が,実際にその問題を経験しないとわからないことも多い。それはそれでいいのだろうけど。何か分からないことがあると,ネットで検索すると多くの記事が出てくるが,「基本」がわかっていないと振り回されるだけになる。あれこれいじっていくとだんだん管理画面(ダッシュボード)に慣れてくる。そこで半人前だ。

それで改めて,カスタマイズについて考えるようになる。

ひとつめのポイントは,CSSの利用だ。それは管理画面(ダッシュボード)の「外観」の(「テーマ」)の「カスタマイズ」の「追加CSS」に(あるいは「外観」の「CSS編集」も同じページだ。ただこのあたりは,WordPress.comのコースや「テーマ」によって違うのだと思う。),作成したCSSを張り付ければよい。そのためには。対象とするセレクターを探す必要があるが,Google Chromeでは,問題となる箇所で右クリックででてくる「検証」を選択すれば分かる。ただ私はいまだにこの「検証」の使用法がよく分からない(「WordPressを使う」参照。Fire Bugの時の方がすっきりできた記憶がある。)。「外観」の「テーマの変更」で,スタイルシートを探す方法もあろう。CSSそのものについては,別途思い出すなり,勉強し直すなりする必要がある。

もうひとつのポイントは,本当に必要なプラグインを精選して,有効活用することだ。何が必要かは,次の記事にしよう。引き続き興味のある方は,「WordPressを使う」を見て頂きたい。

 

IT・AI・DX,日々雑感

WordPressを使う

大好きなお酒もあまり飲めなくなったし(でも、××が目を離すとすぐ飲んでしまうといわれるが)、最近、幸か不幸か仕事があまり忙しくなくWeb記事を書く時間がとれるようになったので、この機会を利用して積年のストレスのもとであるWordPressを一挙に整理しておこうと思い立った。ストレスの歴史を列記すると、過去、このWebに「ホームページ再生」、「ホームページ再生Ⅱ」、「ホームページ再生Ⅲ」、「WordPress備忘録」、「記事作成(テキストと写真)の備忘録」、「Wordpressの記事のマークアップとCSSの備忘録」、「ホームページを作る、継続して投稿する、そして笑う」、「過去のブログ記事の移転」、「土日で何とかするWordPress」等々…いつまでたっても出発点をぐるぐる回っている感じだ。

WordPressのサイトは、全体の構造、デザインを変える有償、無償の市販の「テーマ」を使って構築する場合が多い。私は、ずっとWordPressが提供しているTwenty Elevenを使っており(これを説明しているのが、後述の⑤の本)、そろそろ変えたいところだ。実は「テーマ」を乗り換えるのは、ツークリックくらいで簡単にできるのだが、ひとつは、今のヘッダーの山の写真のランダム表示を生かしたいということと、もうひとつは、「テーマ」を変えると、見出し、活字等の細かいところを微調整しなくてはならないので、そのノウハウを「思い出す」必要があり面倒なので、いつまでもぐずぐずしているわけだ。

WordPressの「テーマ」は数千レベルで作成されているから、「テーマ」そのもを最初からどうこうしようと思わない限り、大雑把なことさえわかればPHPの細かいプログラミングに入り込まなくてもいいから、その意味では、私の負担は大きくはない。ストレスは大きいが。

私が参考にする本とWeb上の情報

WordPressでWebを作成するとき参考になる入門書的な本を3冊、①「WordPress徹底入門マスター」(Kindle本)、②「今すぐ使えるかんたん WordPress入門」、③「 WordPress Perfect GuideBook 4.x対応版R/3.x対応版」。カスタマイズについてもう少し深く突っ込んでいる本を2冊、④「一歩先にいくWordPressのカスタマイズがわかる本」、⑤「基本からしっかりわかる WordPress 3.xカスタマイズブック」。Web製作者(西沢直木氏)がKindle本で提供している本2冊、 ⑥「脱・初心者を目指すWordPress 189のヒント」、⑦「BizVektorのCSSの直し方」を紹介する。

この頁の最後に詳細目次(一部、不要な部分等は、割愛した。)を掲記しておく。なお①は簡潔でいいのだが、3.9対応からか、現時点では販売されていない。

Webサイトとして⑥⑦の著者のサイトを紹介しておく。かなり膨大なものだ。

CSSを見直す

WordPressの最近のバー-ジョンアップのとき(あるいは、コースを変更したとき)、メニューの色使いがおかしくなってしまった。もともと私は使い始めの頃、「Firebug」を使ってCSSも見直した記憶があるのだが(ただし、メニューについては、どこをどうしたのか記憶がない。)、少し前に今後「Firebug」は提供しないという記事を見つけた。確か各ブラウザーがその機能(インスペクター)を実装したからという理由だったかと思うが、そう言われても途方に暮れる。そこで、⑦「BizVektorのCSSの直し方」を参考にする。Google Chromeでは、問題となる箇所で右クリックででてくる「検証」を選択すればいいらしい。「BizVektor」という「テーマ」の名前が挙げられているが、どの「テーマ」でも応用が利くということだ。

そこで今日、しばらくやってみたが残念ながらどこをどう直せばいいのか、よく分からない(インスペクターについては、ここに説明されているので、後日、検討したい。)。考えてみればメニューのつくりかたや、ロールオーバーさえ忘れていたのだから、まずそこからだ。この問題の解決は、Twenty Elevenが導入された当時、メニューに手を入れた記録を綴っているWebの頁が何個か残っているから、それを見る方が早そうだ。うまく行かなければ、Twenty Elevenを変えればいい。

今、WordPress+テーマ+プラグインは、相当に複雑になっているから、原因不明でうまく行かないことも全然珍しくないらしい。「テーマ」を変えて解決できるのであればそれはそれでいいのだろう。ただいずれにせよ、もう少し頑張ろう。

その他の問題

その他、画像の挿入や、画像付きのKindle本へのリンクを、快適にしたいと思っているが、これはそんなに難しいことではないだろう。

またせっかく時間を使うのであれば、できるだけ多くの人に読んでもらいたくなるから、今までは考えたこともなかったが、SEOにも気を配ってみよう。ただあるWeb記事で、内容のない頁はGoogleに検索されないように手を加えようと書いてあったのは、少しおかしかった。

なお今日現在、④については、詳細目次が用意できていない。⑥⑦は、どちらかといえば、Tips集だし、そんなに高くないKindle本だから、目次の掲記はしない。著者のWebを見てもらえば充分だろう。

➀~③、⑤の本の詳細目次