LINEで送る
Pocket
このエントリーをはてなブックマークに追加


皆さんはOsclassを使って、SNSを制作しようと試みたことはありますでしょうか。

私は実際にOsclassを使って、SNSを公開しています

しかし、制作しようにもオリジナルテーマの作り方を解説しているサイトは少なく、特に日本語での解説は皆無です。

ということで今回は、Osclassのテーマの作り方をパート分けして紹介していきたいと思います。

尚、制作にはHTML/CSS/JS/PHPの中級者以上の経験が必須ですので、未経験の方にはおすすめしません。

スポンサーリンク




テーマ制作に必要なもの

テーマを制作するに当たって、以下のものをご用意ください。

  • コードエディタもしくはIDE
  • ローカル開発環境(XamppやAmpps, Wamppなど)
  • Osclass本体
  • テーマテンプレート -> こちらからダウンロード出来ます。

おすすめのコードエディタ

おすすめのIDE

解説

コードエディタの場合は、実際には自分が一番使いやすいエディタを使うことが一番です。

個人的に一番好きなのはVisual Studio Codeです。軽量でPHPの拡張機能の設定をすれば、IDE要らずで使えます。

IDEをご利用の場合は、無償で利用出来るNetBeansがおすすめです。

Eclipseベースで、よりWebアプリ開発に特化しています。

PhpStreamは、機能で言えば群を抜いていますが、有償(30日間お試しあり)なので…

Eclipseの場合は、PHPの拡張機能をインストールしなければいけないので、特に拘りがなければNetBeansをオススメします。

おすすめのローカル開発環境

今回はデザインが主体なので、Amppsがおすすめです。

設定がGUIで簡単に出来ますので、サクッと環境を構築したい方にオススメです。

もちろん、既にXamppやWamppをインストールしている方はそのままで問題ありません。

ローカル開発環境を作ってみよう

*今回はVisual Studio CodeAmppsを使って解説していきます。

必要なものが揃い、インストールしたら早速開発環境を作ってみましょう。

Amppsを起動したら、ウェブブラウザでphpMyAdminにアクセスし、データベースを作成します。

データベース名は好きなもので問題ありません。文字コードは「utf8_general_ci」もしくは「utf8mb4_general_ci」に設定します。

Osclass本体を、Ampps\www\に配置します。

ウェブブラウザでlocalhost/osclassにアクセスし、インストール作業を開始します。

Amppsの場合、デフォルトではデータベースユーザー名はroot、データベースパスワードはmysqlとなっています。

アカウントやサイト設定が完了したら、ローカル開発環境は完成です。

テーマのベースを作ってみよう

ダウンロードしたテーマテンプレートを、osclass¥oc-content¥themes¥に配置します。

osclass本体のフォルダーを右クリック → コードエディタで開きましょう。

(?)なぜOsclass本体のフォルダーを開くの?

Osclassのフォルダーから開くことで、Osclass本体で使用されている関数のコード補完が可能になります。

テーマを制作するにはとても便利ですので、themesフォルダから開くよりも、メリットが多いのです。

デメリットと言えば、表示されるフォルダ数が多くなることくらいですね。

テーマのメタ情報を記述しよう

*ファイルのそれぞれの役割については、『【保存版】Osclassテーマの作り方とテーマ制作用テンプレートファイルを作ってみた』を参照してください。

エディタを起動したら、まずはindex.phpを編集します。

original_theme_info()」のoriginal及びその他各箇所をお好きなように変更しましょう。

変更後、管理者画面→外観(Appearance)→テーマの管理(Manage themes)にてテーマのメタ情報が表示されます。

テーマを有効化して、トップページを見てみましょう。

何も表示されませんね。これは、HTMLなどが何も記入されていない為です。

下準備はここまでです。次回は、実際にテーマを少しずつ作っていきます。

それでは、お疲れ様でした。次回をお楽しみに!

Osclassのオリジナルテーマを作ってみよう!Part2 テーマの構造編

テーマ制作、お任せください!

もしテーマを作るのが面倒、よくわからない、任せたい!とお悩みであれば、ぜひご依頼ください!

お問い合わせ、ご相談は以下までお願いします。

ご連絡お待ちしております。

Twitter: @gt_musix

Mail: クリックでメールを送信


スポンサーリンク