Uncategorized

PublishPressのプラグインで記事を複数のシリーズに追加させる

by

PublishPress Seriesの無料バージョンでは、1つの記事に1つのシリーズしか追加できません。しかし、WordPressのプラグインのソースコードは編集可能です。今回は、このプラグインを編集して 1つの記事を複数のシリーズに追加できるようにカスタマイズ する方法をご紹介します。 カスタマイズの背景 デフォルトのPublishPress Seriesでは、記事をシリーズに紐づける際に単一選択しかできません。そのため、例えば「初心者向けJavaScript」と「フロントエンド開発」という2つのシリーズに同じ記事を含めたい場合には対応できません。 今回のカスタマイズでは、コードを編集して 複数選択が可能なチェックボックス形式 に変更します。 コード編集手順 WordPress管理画面 から プラグインファイル「orgSeries-admin.php」を選択します。 下記のコードを編集・追加します。 動作確認 カスタマイズの注意点 並び順の変更: デフォルトでは、シリーズ内の記事はID順に並びます。独自の並び順を設定したい場合は、カスタムフィールドやプラグインを活用してさらに調整することができます。 バックアップ: ファイルを編集する前に、必ずプラグインのバックアップを取ってください。 終わりに このように、少しのコード編集で無料版のPublishPress Seriesをカスタマイズし、記事を複数のシリーズに対応させることが可能です。他のカスタマイズにも挑戦して、自分のサイトに最適な機能を追加していきましょう！

Vite を使った Svelte プロジェクトのセットアップ

by

1. はじめに フロントエンド開発で注目されている「Svelte」。そのSvelteを使ったプロジェクトの開発効率をさらに高めてくれるツールが「Vite（ヴィート）」です。 この記事では、Viteを使ったSvelteプロジェクトのセットアップ手順を詳しく解説します。また、「なぜViteを使うのか？」その利点についても初心者にもわかりやすく説明します。Viteの利便性を体感しながら、モダンな開発環境を一緒に構築していきましょう！ 2. なぜViteを使うのか？ Viteは、次世代のフロントエンドビルドツールです。その名前はフランス語で「速い」を意味し、その名の通り、高速な開発体験を提供します。 Viteを選ぶ利点 Viteを使えば、「速さ」「シンプルさ」「柔軟性」を兼ね備えた開発環境を手に入れることができます！ 3. Viteを使ったSvelteプロジェクトのセットアップ手順 それでは、Viteを使ってSvelteプロジェクトをセットアップしていきましょう。以下の手順に従うだけで、数分で環境が整います。 ステップ1: Node.jsをインストールする まずは、Node.jsがインストールされていることを確認しましょう。 ステップ2: ViteのSvelteテンプレートを作成 1．ターミナルを開き、プロジェクトを作成したいフォルダへ移動します。 2．以下のコマンドを入力して、ViteのSvelteテンプレートを作成します： 3．プロジェクトフォルダに移動： ステップ3: 必要な依存パッケージをインストール 1．以下のコマンドを実行して依存関係をインストールします： 2．インストールが完了したら、開発サーバーを起動します： 4. プロジェクトのファイル構成 Viteで作成したSvelteプロジェクトのファイル構成は以下のようになっています： 5. Viteのカスタマイズ カスタム設定例: 開発ポートの変更 デフォルトでは開発サーバーはポート5173で動作しますが、これを変更したい場合は、vite.config.jsに以下を追加します： Tailwind CSSの導入 モダンなスタイリングを手軽に行いたい場合は、Tailwind CSSを追加するのがおすすめです。以下の手順で設定できます： 1．Tailwind CSSをインストール： 2．tailwind.config.cjs を編集し、Svelteのファイルをスキャン対象に追加します： 3．src/app.css に以下を追加： 4．main.jsにCSSをインポート： これでTailwind CSSが使えるようになります！ 6. まとめ Viteを使ったSvelteプロジェクトのセットアップは驚くほど簡単で、高速な開発体験を提供してくれます。特に、HMR（ホットモジュールリプレースメント）やシンプルな設定は、モダンな開発環境を求める開発者に最適です。 次のステップとして、以下を試してみましょう： ViteとSvelteで、快適な開発ライフをスタートさせてください！