• かちびと.net

    クリーン且つクオリティの高いデザインで完成度の高いフリーのHTML5製WordPressテーマ・TheProtonのご紹介。有料のようなクオリティの無料テーマです・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

クリーン且つクオリティの高いデザインで完成度の高いフリーのHTML5製WordPressテーマ・TheProton

スポンサーリンク

なかなか素敵なテーマだったので
ご紹介。サイトのオプションや、
美しいレイアウトと完成度の高い
デザインながら無料で配布されて
いるWordPressテーマ・TheProton
です。高機能でもあるので作りを
参考にしたいですね。

僕はよくテーマを探していますが、これはそのテーマの構成を参考にしたいからです。お仕事でそのまま使う事はありませんが、配布されたテーマから学べる技術はかなり多く、他のブログでも記事にされていないTipsも得られたりします。いろいろなテーマを触ることはスキルアップにも繋がるかなと思います。

今日ご紹介するテーマもとても高性能ですので開発者さんも参考にされてはいかがでしょう。

TheProton


とっても綺麗です。美しいデザインだけでなく、ドロップダウンメニュー対応、管理画面内でテーマカラーや、スライド、Twitterやロゴなども変更できます。
特徴は・・・ありすぎるくらいです。ちょっと長いですけど

  1. 7種のカラーテーマから選択可能
  2. 3種類のjQueryのスライダーから選択可能
  3. サイドバーウィジェット対応
  4. Cufonのテキスト置換対応
  5. カスタムメニュー対応
  6. HTML5製
  7. 3種類のレイアウトから選択可能
  8. 30個のカスタムショートコードを用意
  9. ポートフォリオとギャラリーの作成が可能
  10. スライドには好きな画像を挿入可能
  11. それぞれの投稿にカスタムヘッドライン
  12. Twitterの設定が可能
  13. クロスブラウザ
  14. テーマの管理機能
  15. 画像の自動サイズ変更
  16. パンくずナビ
  17. コメントのネスト化
  18. 関連記事の抽出
  19. 画像と動画のLightbox表示対応
  20. マルチカラム対応
  21. jQueryのドロップダウンメニュー
  22. テーマのPSDファイル付き
  23. ドキュメント

PSDも含まれているので機能はそのままでデザインを好みに変える事も可能ですね。

設定


テーマファイルを有効化すると、設定画面に移動します。ここではテーマカラー、イメージスライダーで利用するスクリプト、ロゴの画像やTwitterのアカウント、キャッチコピー、フッターテキストなどなど様々な設定が可能ですので、テーマファイルを直接いじることなく好みのTOPページにすることが出来ます。

スライドショー


スライドショーに含めるか否かは、投稿ごとに決められます。キャプションの場所やテキストなどもここでかなり細かく決定できますよ。

ドロップダウン


カスタムメニュー対応です。ドロップダウンにするにはカスタムメニューでドラッグで入れ子を作ればOKです。

ポートフォリオ機能


カスタムポストタイプが最初から導入されていて、ポートフォリオを作成することが出来ます。Lightbox機能も付いていますよ。

ちょっと機能がありすぎて紹介しきれないんですが、以下だけご注意です。

ご注意・thumb.phpに関して

TheProtonには少し前にちょっとXSS脆弱性で話題になったthumb.phpが含まれています。

この脆弱性により、第三者が任意のPHPコードをTimThumbキャッシュディレクトリにアップロードでき、そのコードを実行されてしまいます。

timthumb.php もしくは thumb.php が無くても動作するならこのファイルをサイトから削除するようおすすめします。もし使っていないテーマやプラグインの中にこのファイルがあったら、そのテーマやプラグインのディレクトリごと削除したほうがいいでしょう。
参照:Vulnerability Found in timthumb.php
via 兼 翻訳:め組の小ネタ

そういうわけで、お気をつけください。修正法も上記サイトに記述されています。

しかしながら有料クラスの機能を持つテーマで、デザインの元となるPSDも配布とはなかなか凄い太っ腹ですな・・・公式ディレクトリにおいてあるテーマでは無いので自己責任でご利用ください。

TheProton

URL :
TRB :

Comments & Trackbacks (18)

  1. 関野

    はじめまして 
    wordprss初心者です。
    XAMPPにて localhostにて テーマインストールしようとしていますが
    貴殿ご紹介の THE PROTONがインストールできません。
    直接ファイルにいれたところ スタイルシートが見つかりません。 となりますし
    テーマからインストール(アップロード)しようとすると本当に実行していいですか? もう一度お試しください というエラーメッセージがでます。

    どのようにすればいいか教えていただけませんでしょうか。

    • シロ

      こんにちは、東京都のシロと申します。

      XAMPPにて localhostにて テーマインストールしようとしていますが
      貴殿ご紹介の THE PROTONがインストールできません。
      直接ファイルにいれたところ スタイルシートが見つかりません。 となりますし
      テーマからインストール(アップロード)しようとすると本当に実行していいですか? もう一度お試しください というエラーメッセージがでます。

      ダウンロードし、解凍すると4つのzipファイルが格納されています。他はおまけのようなものですが、4つのzipファイルが格納されたものを入れていませんか?

      このzipファイルのうち、WordPressテーマはTheProton_Main_Fileというファイルです。

      このTheProton_Main_Fileというファイルを更に解凍したものがテーマになりますので、wp-content/themes/内にフォルダごと入れれば使えるハズです。

      手順は間違いないでしょうか。

      この手順で出来ませんようでしたら再度コメント下さいませ :)

      それと、thumb.phpに関してもご注意下さいね。ご利用は自己責任です・・・

  2. 関野

    何度も申し訳ありません。
    どうも mainfileだけだと無理やり入るのですが、その他のファイルの入れ方がわかりません。
    今までテーマはいくつかインストールしていたのですが、このようにすんなり入らないケースは二度目です。
    ひとつは Elegant, Classy, Prestashop Compatible,
    これは  Prestashop だけあきらめ wordpressテーマのみいれて動いています。
    さて このproton どうすればすんなり入るのでしょうか 
    デザイナーのページもなぜかダウンして ここまでは進んだのですが・・・・
    よろしくお願いします。

    • シロ

      こんにちは。別の記事にコメントされてましたのでこちらに勝手に移動させていただきました。

      どうも mainfileだけだと無理やり入るのですが、その他のファイルの入れ方がわかりません。
      今までテーマはいくつかインストールしていたのですが、このようにすんなり入らないケースは二度目です。

      い、いえ、mainfile以外は入れるものではないのです。「不要」です。

      おまけとお伝えしたと思うのですがちょっと分かりにくかったですね。

      1.TheProton_Main_Fileというファイルを解凍
      2.解凍したフォルダをwp-content/themes/内に格納
      3.管理画面で有効化

      これで使えます。

  3. test0984

    すみません。上の記事を参考にしてこのテーマをインストールしたのですが、下のURLのように表示がずれてしまいます。
    http://test0984.sub.jp/
    何か原因となるようなものがあれば教えていただけますか?

    • シロ

      こんにちは。コメント有難う御座います。

      表示がずれるのはデモと同じようにメニューやロゴを設定してないからでは無いかと思います。

      • test0984

        早速の返信ありがとうございます。

        ロゴはわかるんですが、メニューの設定の仕方が全くといっていいほどわからないです。

        • シロ

          メニューは外観→メニューで設定します。カスタムメニュー、というWPのデフォルト機能になっています。

          それと、こちらのテーマファイルには「TheProton_Documentation」というzipファイルが含まれています。ここに使い方が書かれていますのでぜひご覧になってみてくださいね:)

          • test0984

            返信ありがとうございます。
            表示ズレ、メニューの表示などは解決しました。

            しかし今度はトップページに画像を表示させることができません。

            おそらく記事投稿で追加するのでしょうが、自分のやり方が悪いのかやはりうまくいかないです。

          • シロ

            解決したようでなによりです。

            しかし今度はトップページに画像を表示させることができません。
            おそらく記事投稿で追加するのでしょうが、自分のやり方が悪いのかやはりうまくいかないです。

            The Protonという名前の項目が管理画面のメニュー最下部に追加されますので、そこから好みのスライダーを選択し、保存します。

            その後、記事投稿ページにてThe Proton Theme Post Setting内のInclude this post into the featured slideshow?にチェックを入れるとフォームが展開されますのでタイトルや解説に加えて、表示させる画像のパスを入力し、記事を投稿すれば含めることが出来ます。

            次にサムネイルですが、サムネイルはアイキャッチとthumb.phpを利用して表示させますので、記事毎にアイキャッチを登録します。ただし、thumb.phpには脆弱性が報告されていますので、thumb.phpを開いて

            http://blog.vaultpress.com/2011/08/02/vulnerability-found-in-timthumb/

            で書かれている$allowedSitesにて加わっている配列を削除してください。これをしてあげないとガンプラーウィルスにかかってしまう可能性がありますのでお忘れないようにしてくださいね。

            以上、お楽しみ下さいませ:)

  4. test0984

    できました!ありがとうございました

    • シロ

      おお、よかったです!では、楽しんでくださいませー!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services