Stockholmはあらゆるクリエイターのポートフォリオサイト構築に適したWordpressテーマです。ただ、海外製テーマのため使い方の解説は英語のみという難点がありました。なので今回は日本語で使い方を解説します。
![](https://takaprex.com/wp-content/uploads/2022/04/名称未設定-2_アートボード-1-1024x629.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
個人的には超お気に入りのテーマなので、たくさんの人に使ってもらいたいです!
主な内容
- Stockholmのインストール
- デモのインストール
- 必要なプラグインのインストール・設定
- その他初期設定
Stockholmはフォトグラファーやイラストレーターなどのクリエイターにおすすめです。洗練されたポートフォリオサイトを簡単に構築できます。まだ購入されていない方は、Envato Marketから購入をお願いします。
※Envato Marketの使い方については下記の記事でまとめています
![](https://takaprex.com/wp-content/uploads/2022/04/envato_アートボード-1-300x169.png)
![](https://takaprex.com/wp-content/uploads/2022/04/envato_アートボード-1-300x169.png)
では解説していきます。
1. Stockholmテーマのインストール
Envato MarketでStockholmテーマを購入したら、インストールに必要なファイルをダウンロードします。Envato Marketにログイン後、自分のユーザー名の下のドロップダウンから”Downloads“をクリックし、購入済みテーマの一覧画面へ遷移します。
Envato Marketから必要なファイルをダウンロードする
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.04-1024x646.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.04-1024x646.png)
Stockholmテーマの”Download”ボタンのプルダウンからAll files & documentationをクリックすると必要なファイルをダウンロードできます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.14-1024x253.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.14-1024x253.png)
いくつかファイルがダウンロードされますが、その中に“stockholm.zip”という圧縮ファイルがあります。これを後ほどWordpressにアップロードしますので、ファイルがちゃんと存在していることを確認しましょう。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.18-1024x176.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.18-1024x176.png)
WordPressにStockholmテーマをアップロードする
WordPressの管理画面にログインします。
WordPressのインストールがお済みでない方は、下記の記事で方法を紹介しています。
![](https://takaprex.com/wp-content/uploads/2023/01/portfolioの作り方ヘッダー-300x169.png)
![](https://takaprex.com/wp-content/uploads/2023/01/portfolioの作り方ヘッダー-300x169.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.33.44-1024x576.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-0.33.44-1024x576.png)
外観メニューのテーマから先ほどの“stockholm.zip”ファイルをアップロードします。手順を以下の動画でご案内しています。
アップロードが完了したら「有効化」をクリックします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-1.21-1024x640.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-1.21-1024x640.png)
有効化されるか下の画面に自動的に遷移します。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-1.26.24-1024x640.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-1.26.24-1024x640.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
お疲れ様です。ここまででStockholmのテーマのインストールが完了しました。次はプラグインのインストールを行います。
2. Stockholmに必要なプラグインのインストール
Stockholmを使うために必要なプラグインが指定されていますので、それらをインストールします。「外観」→「Install Plugins」と進むと、必要なプラグインの一覧が表示されますので、これらをインストールしていきます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-22.53.14-1024x602.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-22.53.14-1024x602.png)
必要なプラグインの内容
- Stockholm Core:Stockholmを使うためのパッケージプラグイン(インストールが必須)
- Elementor:コード知識がなくても簡単にページを作れるページビルダー
- Envato Market:Envato Marketで購入したテーマを使っているとアップデートの際に通知がくる
- Layer Slider WP:画像をスライダー形式で表示(数秒ごとに画像が変わるなど)させる
- Qi Addons for Elementor:Elementorのアドオン(拡張機能)
- Revolution Slider:Layer Slider WPと同様のスライダープラグイン
- Select Instagram Feed:インスタの投稿をサイト上に表示させる
- Select Twitter Feed:Twitterの投稿をサイト上に表示させる
- WPBakery Visual Composer:Elementorと似たようなページビルダー
全てのプラグインにチェックを入れた状態で、一括操作で”Install“を選択し「適用」をクリックします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.31.34-1024x611.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.31.34-1024x611.png)
次にインストールしたプラグインを有効化します。全てにチェックを入れて一括操作で”Activate“を選択し、適用をクリックします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.39.00-1024x626.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.39.00-1024x626.png)
有効化が完了すると、このようにメニューに項目がたくさん追加されます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.42.39-195x1024.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.42.39-195x1024.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
ここまでで、必要なプラグインのインストールと有効化が完了しました!
Stockholmはインストールするプラグインが多いのですが、全部は使わない場合もあります。Stockholmが用意しているデモ(サイトの着せ替えデザイン)が100種類以上もあるので、どのデザインにするかによって使うプラグインが変わってきます。不要になればアンインストールもできますので、この段階ではまず全部インストール・有効化をしておきます。
3. Stockholmテーマの初期設定
ここからはStockholmテーマの初期設定について説明をします。
Stockholmテーマの有効化
ダッシュボードのTOPページには下記のようなメッセージが表示されます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.58.16-1024x112.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.58.16-1024x112.png)
Stockholmテーマは、有効化する事で全ての機能が使えるようになります。
Envato MarketでStockholmテーマを購入した際に、Purchase Code(購入コード)が付与されていますので、それを先ほどインストールしたStockholm Coreのプラグイン画面で入力すると有効化されます。
Envato Marketでテーマをインストールする際に必要なファイルをダウンロードしたページにいきます。”License certificate & purchase code”をダウンロードします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.50-1024x259.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-12-23.50-1024x259.png)
PDFでLicense Certificate(ライセンスの証明書)をダウンロードできます。
その中にItem Purchase Codeという項目がありますので、こちらを使います。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-13-0.04-1024x589.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-13-0.04-1024x589.png)
WordPressのダッシュボードのメニューにStockholm Dashboardが表示されているので、先ほどのItem Purchase CodeとEnvatoに登録してるメールアドレスを入力し、Register Themeをクリックします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-14-2.24-1024x811.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-14-2.24-1024x811.png)
無事登録されると”You have successfully registered〜”のメッセージが表示されます。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-14-2.33-1024x710.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-14-2.33-1024x710.png)
Demo(デモ)のインポート
Stockholmの最大の特徴は100種類以上にも及ぶデモの多さです。
デモとは、サイトの着せ替え機能のようなもので、デザインが予めパッケージになっているのでインポートするだけでオシャレなサイトを作ることができます。簡単にいうとStockholmを一つ購入すれば、100種類以上のデザインを入手できるということです。
カテゴリーに分かれているので自分にあったテーマを選びましょう。写真のポートフォリオサイトを作りたい人はPortfolioやPhotographyなどのカテゴリーから選ぶといいです。
今回は写真のポートフォリオサイトを想定して、Leiaというデモをインポートします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-0.51.52-1024x614.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-0.51.52-1024x614.png)
メニューのStockholm DashboardのImportをクリックします。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.07.50.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.07.50.png)
デモの一覧が表示されるので、インポートしたいデモを選択します。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.14.45-1024x559.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.14.45-1024x559.png)
Import TypeでAllを選択してImportボタンをクリック
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-2.08.02-1024x693.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-2.08.02-1024x693.png)
完了するとデモが無事インポートされている事が確認できます。
エラーメッセージが出た場合
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.16-1024x622.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.16-1024x622.png)
エラーメッセージが出ている場合は、サーバー側の設定がStockholmの仕様に合っていないので設定を変更する必要があります。まずはStockholm DashboadのSystem Infoのメニューを確認します。下記のように現在の設定値が赤字になっており”The current value is insufficient〜”(=現在の値は不十分です)と記載がある項目について設定変更が必要です。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.17-1024x718.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.17-1024x718.png)
Xserver(エックスサーバー)の場合の設定方法
お使いのサーバーがXserverの場合はphp.iniのメニューから設定を変更します。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.20-1024x573.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.20-1024x573.png)
phph.ini直接編集のタブから、値を修正します。
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.59-1024x698.png)
![](https://takaprex.com/wp-content/uploads/2022/04/スクリーンショット-2022-04-16-1.59-1024x698.png)
- PHP Post Max Size (エックスサーバーではpost_max_size):256MBに
- PHP Time Limit(エックスサーバーではmax_execution _time):300に
- PHP Max Input Vars:エックスサーバーには無い項目なのでmax_input_vars=5000と追記
※post_max_sizeは256と数字だけ記載するとなぜかエラーになるので、256MBと記載します。
まとめ:まずは好きなデモを見つけよう
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
![](https://takaprex.com/wp-content/uploads/2021/12/25ACA7B6-1E1F-44C0-83E4-2BD873CCACD6.png)
お疲れ様です。これでStockholmテーマのインストールと最初の設定は完了です。
今回はStockholmテーマをWordpressにインストールし、サイトデザインのデモをインポートするところまで解説しました。この後のステップとしては、デモのデザインをベースに自分の好みに整えていく流れになります。Stockholmはとにかくデモの数が多いことが特徴です。100種類以上あるので迷ってしまいますが、きっとお気に入りのデザインが見つかるハズです!