wordpressのテーマ作り

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

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

Stinger5

wp-fun.com/
Stingerは初心者でも簡単にSEOやアフィリエイトを考慮したブログが始められる無料テーマ.
Stinger5は、レスポンシブデザインに対応したメジャーバージョン.

参考 STINGER5カスタマイズまとめ!知りたい全てはここにある!

子テーマをつくる

テーマ用のディレクトリを作成して、style.cssを作るところから.

ヘッダー画像

テーマの設定画面から変えてもよかったみたいだけど、テーマで設定した.
参考  Stinger3でWordPressのテーマつくった
function.phpを作成して

そういえば、hackが使えるかhhでやってみた.

ファビコン変更

ファビコンはheader.phpの書き換え

日本語URLを使えるように

Stingerでは日本語URLが基本使えないようになってる.
今さら日本語URLをやめられない人はfunction.phpの該当部分を削除.
作者の指摘通り日本語URLはSNSなどでつかう場合にうまくいかない.
これは親テーマから削除した.

参考 ver20141011をUP致しました。

適当に色などを設定

Stinger5では適当に基本色を設定できる.
screenshot

H要素の前に番号を追加

counterとbeforeを使うことにした.

参考 CSS で章番号を生成する
参考 カウンタの値

Stingerの吹き出しのようなH2の装飾は併用できないので、吹き出しの方をあきらめて、元テンプレートのstyle.cssの該当部分をコメントにした.

TOC

TOCはプラグインを使うことにした.
Table of Contents Plus
Table of Contents Plus – 記事の目次を自動生成できるWordPressプラグイン

* 一応、ウィジェットにも目次を出すことができる.これは将来的にサイドの固定メニューに出して操作できるようにしたい.

トップに戻るを目次に戻るに変更

自動的にトップに戻るリンクが出てくるけど、トップは戻りすぎで目次があるときは目次に戻って欲しいので少し変更した.
footer.php

base.js
base.jsは元のテーマファイルを修正した.

参考 Animate scroll to ID on page load

モバイルの場合も一度目次に戻って、目次からジャンプするようにできた.
本当は、メニューに目次を出したいが面倒そうなので今回はパス.

WP-PostViewsのPopular Postsの見た目をStingerにあわせる

サムネイルを表示してStingerぽく

参考 WP-PostViewsにアイキャッチ画像を表示

課題

Viper’s Video QuickTagが動かない.

タグは精製されてるけど、表示されない@Firefox
safariは微妙に表示される.
スマホはきちんと表示される.
headerにwp_head()はある. > Viper’s Video Quicktags
Stinger5のheaderの自動修復は削除したけど変わらない > WordPress – STINGER5の使い方
困ったちゃん

AmazonJSが価格しか取得できない(解決)

前々からだった気がするので、Stingerは関係なさそう
タグ作成の検索の時にも価格しか取れないから、何かの認証なんだろうな

hhvmがmysqlにつなげないエラーになったので、php5-fpmに戻した.
php5-fpmにしたらAmazonJSのデータもなぜか取得できるようになった.

羽生善治の将棋のお手本〜初心者からの定跡講座〜

羽生善治の将棋のお手本〜初心者からの定跡講座〜

種別iOSアプリ

開発者アイハット株式会社

価格¥240

リリース日2013年2月14日

ジャンルゲーム, 教育, ボード, 教育

AppStoreでダウンロード

Supported by Performance Horizon Group

-wordpressのテーマ作り
-, ,

執筆者:

関連記事

no image

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

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

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

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

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

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

Stinger3でWordPressのテーマつくった

By: The National Guard – CC BY 2.0 目次1 Stinger3ってどんなテーマ?2 子テーマをつくる3 ヘッダー画像を変える4 トップページを変える5 h2 …

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

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