wordpressのテーマ作り

Stinger3でWordPressのテーマつくった

投稿日:2014年2月23日 更新日:

By: The National GuardCC BY 2.0

Stinger3ってどんなテーマ?

WordPressテーマのSTINGER3公式サイトに書いてある特徴

  • WordPress初心者も簡単にブログを始めることができる無料テーマ
  • アフィリエイトコードを簡単に設定可能
  • ブログのカスタマイズも簡単
  • ブログの運営に必要なものがプラグイン無しでそろっている
  • 自動追尾式広告
  • スマートフォンにも自動で最適化
  • SEO対策、アフィリエイトに効果あり

公式キャラもいます

stinger0003

ちょっとのカスタマイズで今風の要件が整ったブログを使えるテーマと理解した

子テーマをつくる

stinger3のアップデートのたびにテーマをカスタマイズし直すのも大変なので子テーマを作るのがセオリー

子テーマの作り方は themes/ に適当なテーマ名でディレクトリを作成する

style.css をつくる

Templateにすでに登録済みのStinger3のテーマ名を書くこと、Stinger3のstyle.cssをインポートすること
最低限style.cssにこれだけ書けば子テーマになる。

基本的にカスタマイズしたい部分を子テーマにコピーしてカスタマイズする

ヘッダー画像を変える

いきなり難問。ヘッダー画像はfunctions.phpで設定している。

functions.phpをそのまま子テーマにコピーするとエラーが出てしまう。

結論的には、小テーマのfunctions.phpには必要な部分だけ書けばOK。

get_template_document_uriをget_theme_root_uriに変え、テーマのディレクトリ名を書いておいた

画像はイラレとかで適当につくる

ついでにファビコンもオリジナル画像にしておいた

その他、ヘッダー周辺のカスタマイズはえけこのくるるが非常に詳しかった

トップページを変える

トップページの情報をもっと圧縮したいのでCSSを変えたりする。

注意する必要があるのは、コピするのはindex.phpではなく、home.phpということ。

 div要素全体をクリッカブルにしてリンクする~CSS を参考にdiv全体をクリックしてリンクする感じにした。

ついでにシングルページの関連記事もクリッカブルにした。

今回はjQueryをつかった。

base.js

style.css

 

h2に連番を付加する&TOCを表示する

WordPressにページ内ナビゲーションをつけた~jQueryを参考に作成した。

通常ページは、base.js、スマホページはsmartbase.jsを呼んでいるけど、footer.phpから子テーマのbase.jsを呼ばせればOK。

ついでにSNSサイトリンクが本文にかかるのが嫌だったので、右に動かして、トップページのリンクと一緒に消えたり出たりするようにした。そのうち、このあたりにTOCも出てくるようにしたい。

ついでに、TOCも復活した。

過去記事の絞込み検索ページをつくった

全記事検索

WordPressで全記事のアーカイブページを作成

jQuery リストの絞込み  キーワードにマッチしたテキストリストのみを表示

SNSアイコンの軽量化

最高のWordPressテーマStingerのSNSボタンを軽量化する。#Stinger-WP

SNSアイコンが重いのでウェブフォントを使うのと、Javascriptからphpでの処理へ

sns.phpのほかsns02.phpも入れ替えた。

sns02.phpはis_homeで場合分けしているので、もとのを参考に作ってみた。

たぶんうまく動いてるはず。

is_pageの方は、参考元のsns.phpと同じli要素を貼り付けておけばOK。

is_homeの方は、the_titileをbloginfo(‘name’)に、get_permalink()をhome_url()にする。ただし、phpの引数で使う場合じゃない場合はecho home_url()にしないといけないので、注意が必要。

テーマはGithubにあげてるけど、ウェブフォントを入れていいかよく分からなかったので、gitignoreしている。

google url shortner

twtterの投稿urlに日本語が含まれているとつぶやきのリンクの範囲がうまく決まらないことがわかった.

ドットインストールを参考に、Google URL shortnerを使った.

いまはUI自体が大分変更されているので注意が必要.

Goolge Consoleから、「Services」を選んで、「Google Url Shortner」をONにする.

そのあと、「API Access」から、「Simple Api Access」で、「Create new Serever Key」を選んで、サーバーのIPアドレスを登録する.

すると、APIキーが発行される.

今更、Google URL短縮APIを試してみた。for PHP

 

高速化プラグイン

GTmetrix90点以上は当たり前!全てのStingerユーザーにおすすめのプラグインと設定から圧縮ずみのテーマ画像をダウンロードして本家テーマの画像と差し替えた。

その他、導入したプラグイン

  • W3 Total Cache キャッシュ管理
  • 001 Prime Strategy Translate Accelerator WordPress日本語版を使うときの日本語ファイルをキャッシュしてくれるぽい
  • WP Hyper Response phpのflush関数を使ってリクエストのタイミングを早くする?
  • EWWW Image Optimizer イメージを圧縮してくれる

情報

Stinger Advent Calendar 2013

ここを見ておけば検索不要!Stingerカスタマイズ辞典

Stingerブロガーが便利だと思ったWorePress関数とカスタマイズ方法5つ

Stingerカスタマイズ!あると嬉しいclass,id構造早見表 -トップページ編

-wordpressのテーマ作り
-, ,

執筆者:

関連記事

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …

no image

WordPressの検索窓に予測機能をつける~typeahead

Twitter BootstrapのJavascriptプラグインには検索フォームに予測機能をつけるtypeaheadというプラグインがあるので導入できるか試してみた。 1 searchform.ph …

WordPressのテーマ変更したら軽くなった~自作テーマ

ブログがいつの間にか遅くなっていた。気づいたら3秒台。 もろもろ考えたあげく勉強も兼ねて簡単なWordpressのテーマを作ってみることにした。 参考 テーマの作成方針 テーマをつくるための方針はつぎ …

WordPressにページ内ナビゲーションをつけた~jQuery

      MediaWikiとかTwitterBootstrap2.1.0に新しくついたやつとかそんなイメージ 仕組みとしては投稿の<h2>要素を集めてきて …

Stinger5でWordPressブログのテーマを変更した

By: Mikhail Kamarov – CC BY 2.0 目次1 Stinger52 子テーマをつくる3 ヘッダー画像4 ファビコン変更5 日本語URLを使えるように6 適当に色など …