とあるWeb制作会社を立ち上げた人の日記

営業と開発の苦労や思う事をこっそり投稿する

【WP Smart Preloader】WordPressに簡単にローディング画面を追加してみた

f:id:ppiko:20200621004439p:plain

目次

  1. WP Smart Preloaderとは
  2. 導入方法
  3. ローディング画面設定
  4. 最後に

1.WP Smart Preloaderとは

ローディング画面を簡単に追加するプラグインです

アニメーションを取り入れる事によってサイトとしての高級感が上がり、サイトを閲覧した人に大きな印象を与え興味をもってもらいやすくなります。

今回は、そういったアニメーションを追加するプラグインを簡単に導入等の説明をしたいと思います。

公式サイト：WP Smart Preloader

2.導入方法

2-1.公式サイトからダウンロード

公式サイトでダウンロードして、ダウンロードファイルをそのまま管理画面にて「プラグイン」→「新規追加」→「プラグインのアップロード」→有効化

2-2.管理画面から直接追加

WP Smart Preloader
管理画面にて「プラグイン」→「新規追加」→「WP Smart Preloader」で検索→有効化

3.ローディング画面設定

Select Preloader:デフォルトのローディングアニメーションとカスタムアニメーションが選択できます。

Show only on Home Page:トップページの読み込みのみの有無が選択できます

Custom Animation:Select Preloaderでカスタムアニメーションを選択した場合に反映されるHTMLです。

Custom CSS:カスタムアニメーションのカラーの設定だけでなく、デフォルトのローディングアニメーションカラーも設定できます。

Duration to show Loader:読み込み時間になります。

Loader to Fade Out :フェードアウト時間になります。

読み込み時間とフェードアウト時間は、1~1.5秒がオススメです。
2~3秒以上に設定しまうと、実際確認していただけると分かると思いますが少し長く感じサイトの離脱につながりやすくなります。

カラーの変更については、今回のページは読み込みページになりますので、Google Chormeの検証機能等では確認できませんでしたので、 「プラグイン」→「プラグインエディター」で該当コードを確認する方法を試しました。 他にいい方法がありましたら、追記致します。

4.最後に

サイトとしての高級感というのもありますが、最近のトレンドとしてローディング画面が実装されている事が多いです。

今回紹介したプラグインにはhtml/cssでの実装で、背景カラーやアニメーションカラーの変更を実装し、さらにcssアニメーションの実装の確認をしたのですが、まだJavascriptのアニメーションについては実装していません。

Javascriptでさらに動きのあるアニメーションを追加できると、かなりアニメーション幅が広がりそうですね。

【WordPress】「Local by Flywheel」でローカル環境構築を構築してみた

local by flywheel

目次

1.Local by Flywheelとは
2おすすめする理由
3導入方法
　3.1Local by Flywheel
　3.2WordPress
4.デメリット
5.最後に

Local by Flywheelとは

Local by Flywheelとは、簡単にWordPressサイトのローカル環境を構築できるツールです。

XAMPPやMAMP等他にもローカル環境を構築できるツールはありますが、

WordPressのみでサイト作成を行うのであれば、

Local by Flywheelがおすすめです。

おすすめする理由

簡単にWordPressサイトが構築可能

インストールのみでそのままWordPressサイト作成ができます。

他のソフトだと、WordPress以外も対応していることもあり、

WordPressのインストールも行う必要がありますが、

Local by Flyweelの場合、 WordPressのインストールの必要がありません。

複数環境が簡単に構築可能

他のソフトだと僕が調べた範囲では、複数のサイト作成について

書かれている記事がありませんでした。

ですが、「Local by Flywheel」の場合、

サイト事に分けられているので、分かりやすく使いやすいです。

有料版はURLでの公開が可能

無料版でも公開はできるのですが、 <><>

導入方法

Local by Flywheel

Local by Flywheel 公式サイトで、ダウンロードするだけで「Local by Flywheel」の

環境構築は終わりです。

WordPress

「Local by Flywheel」を起動後、



左下に画像の様な「+」ボタンがあるので、選択してください。



次にサイト名の入力をします。



次にPHPのVersionとWeb Serverのバージョン設定を行います。

WordPressサイト作成後でも変更可能なので、「Preferred」を選択してください。



最後に、WordPressの管理者アカウントのユーザー名とパスワードの作成になります。

作成後、そのままインストールになり、環境構築は終わりとなります。

PHPversionとWeb serverの変更について



作成後、「Local by Flywheel」の「OVERVIEW」で画像のような項目があり、

「CHANGE」を選択すると、PHP versionとWeb serverだけでなく

PreferredとCustomにも変更できます。 編集可能となっています。

デメリット

本番のWordPressサイトの構築とは異なる

「Local by wheel」は簡単にWordPressサイトの構築が可能ということもあり、

実際にレンタルサーバーを借りて本番環境を構築し、

WordPressサイトを作成するのとは異なります。

なので、初心者の方は「本番環境」と「ローカル環境」の使用感、

例えば、FTPソフトの有無等だけではなく、

「本番環境でのサイト作成」と「Local by Flywheel」の使用感も

異なるということを意識しながら利用するといいと思います。

他のローカル環境構築ソフトは、「Local by Flywheel」に比べ、

少し使いにくくはありましたが、本番環境に近かったはずだと思います。

最後に

「Local by Flywheel」の環境構築方法についてはよく書かれていますが、

実際に使ってみて、おすすめしたい機能や使い方について書かれている内容が

見つからなかったので今回紹介しました。

この記事を見られる方は、WordPressでサイト作成を始める方がほとんど

だと思いますので、こういった記事を書きました。

【Wordpress】「Custom Post Type UI」でカスタム投稿のタクソノミーを出力してみた

Web制作 WordPress

CPT UI

目次

1.はじめに
2.タクソノミー の作成
3.タクソノミー の表示
　3.1タクソノミー一覧の表示
　3.2カスタム投稿ごとのタクソノミー の表示
3.3まとめ
4.最後に

1.はじめに

「Custom Post Type UI」の基本的な記事はよくありますが、

プラグインを使用してカスタム投稿タイプのタクソノミー をarchive.php等で出力する

というのは、あまり見られなかったので今回記事にする事にしました。

2.タクソノミーの作成

CPT UIをインストールした後、タクソノミーの追加と編集という項目がありますので、

選択しますと、

CPT UI

上記のようなページが表示されます。

タクソノミー スラッグ：URL等の名前。出力する際に使用する。

複数形のラベル：管理画面での表記。僕は分かりやすく「カテゴリー」で作成しています。
単数形のラベル：どこで表示されるかは不明。複数形と同じラベル名にしています。

こちらでは、タクソノミー を作成したいカスタム投稿を選択します。

以上で、タクソノミー の作成は終了です。

CPT UIで作成したタクソノミー がカスタム投稿に追加されていると思います。



こちらが、タクソノミー で追加できる項目になります。分類名とそのスラッグを追加してください。

3タクソノミー の表示

3.1タクソノミーの一覧表示

タクソノミー が作成できたという事で、カスタム投稿を一覧で表示する際に、

タクソノミー ごとで表示させたい

ということが恐らく出てくると思うので紹介します。

<?php
  $terms = get_terms('タクソノミー 名);
  foreach ( $terms as $term ) {
    echo '<li class="taxonomy_li">';
    echo '<a class=" " href="'.get_term_link($term).'">'.$term->name.'</a>';
    echo '</li>';
  }
?>

このコードでタクソノミー ごとに分けられるページを表示できますので、

archive-カスタム投稿のスラッグ.phpに追加してください。

遷移するページはtaxonomy-タクソノミーのスラッグ.phpになります。
(タクソノミー のスラッグは、CPT UIで作成したスラッグで作成してください)

なければ子テーマで作成してください。

get_termsについてはこちらで確認してください。

$term->name：タクソノミー 名が表示されます。

このコードでは、タクソノミー ごとの表示はできましたが、

全てのタクソノミー の表示ができないので、archive-カスタム投稿のスラッグ.phpに遷移するボタンを別で作成してください。

他にも方法はあると思いますが、元のページを表示するだけなので、

archive-カスタム投稿のスラッグ.phpの表示で対応しました。

何か他にいい方法があれば教えていただけると幸いです。

これで、taxonomy-タクソノミーのスラッグ.phpに選択したタクソノミー のスラッグを送信できます。

次に送信したスラッグで表示するtaxonomy-タクソノミー のスラッグ .phpについて説明します

3.2タクソノミー 別の表示

今回は、例としてタクソノミー のスラッグをcategoryとして説明します。

タクソノミー の取得

<?php get_the_terms( $id, $taxonomy ); ?>



があります。本来こちらで項目を取得すると思うのですが、なぜか出力できなかったので、別のコードで説明します。 

<?php
$my_terms = get_queried_object();
?>



こちらのコードでタクソノミー 名を取得できます。

次に取得したタクソノミー 名を利用して一覧を表示します。

カスタム分類のクエリ

$args = array(
    'post_type' => 'post',
    'tax_query' => array(
        array(
            'taxonomy' => 'category',
            'field'    => 'slug',
            'terms'    => $my_terms->slug,
        ),
    ),
);
$query = new WP_Query( $args );

'post_type':カスタム投稿のスラッグ

'taxonomy':タクソノミー のスラッグ(今回はcategory)

'terms':$my_termsで選択したタクソノミーに対するスラッグ

カスタム分類のクエリを利用することで、選択したタクソノミー に対するスラッグを取得し、

ループ関数を使用することで、

タクソノミー 別の表示が可能になります。

ループ関数の例

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        //
        // 投稿がここに表示される
        //
    } // end while
} // end if
?>

3.3まとめ

categoryをタクソノミー のスラッグとした場合。

<?php
/*タクソノミー 別で選択しtaxonoomy-category.phpに遷移する。*/
  $terms = get_terms('category');
  foreach ( $terms as $term ) {
    echo '<li class="taxonomy_li">';
    echo '<a class=" " href="'.get_term_link($term).'">'.$term->name.'</a>';
    echo '</li>';
  }
?>
<?php
/*選択したタクソノミー の項目取得*/
$my_terms = get_queried_object();
$args = array(
    'post_type' => 'post',
    'tax_query' => array(
        array(
            'taxonomy' => 'category',
            'field'    => 'slug',
            'terms'    => $my_terms->slug,
        ),
    ),
);
$the_query = new WP_Query( $args );
?>
/*一覧取得*/
<ul>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <li>
                     //表示したい投稿内容
                    //例
　　　　　if(has_post_thumbnail()){
                the_post_thumbnail(); 
           }
                    //
                 </li>
    <?php endwhile; ?>
</ul>

最後のループ関数について今回は説明を省略します。

最後に

カスタム投稿タイプはHP制作において頻繁に利用する機会が多いと思いますし、

使いこなせるようになる事で、案件の幅が広がると思います。

例えば、標準の投稿タイプですと「ブログ記事」等の投稿しかできませんが、

カスタム投稿タイプは、Advanced Custom Fieldsを使用すれば「スタッフの自己紹介」や「サロン等のメニュー」を追加できる機能を作成できます。

通常の投稿と同様、投稿の分類可能な機能も必要になってくると思います。

ですので、ぜひ利用してみてください。

【BackWPup】無料でWordPressの全データを復元する方法

WordPress Web制作

BackWpup

目次

  1. BackWPupとは
  2. 導入方法
  3. 復元方法

1.BackWPupとは

BackWPupとはWordPressのフロントエンド(デザイン等)とバックエンド(投稿記事等)の全データをバックアップできるプラグインです。

本番環境のサーバーでデータを紛失した場合や、本番環境でテーマの編集やプラグインの編集をしていた場合ということはほとんどないと思いますのでバックアップする必要性は感じないと思いますが、

ローカル環境でテーマの編集やプラグインの編集を行うと思いますので、バックアップしておくと記事編集でミスがあったり、プラグインの更新でレイアウトが崩れたりした際に復元することで解決できます。

ちなみに、本番環境のバックアップとしてサーバーの管理会社様に提供していただけるバックアップがあると思いますが、私が利用しているサーバーの管理会社様では

・一定期間の間のみでしかバックアップデータを保存できない
・投稿記事などのバックエンドデータまで保存できない

という理由で利用していません。もし、同様の機能でしたらBackWPupでのバックアップをおすすめします。

2.導入方法

通常のプラグインと同様、管理画面の新規追加でBackWPup で検索してください。

BackWpup DL

上記の画像がBackWPupプラグインになります。

3.復元方法

Zipファイルをダウンロード

管理画面のバックアップという項目から復元したいZipファイルをダウンロードしてください。

Zipファイルをダウンロード後解凍すると、

f:id:ppiko:20200326005659p:plain

画像のようなファイル構成になっていると思います。

・backwpup__readme.txt
・サイト名.pluginlist***.txt
・manifest.json


こちらのファイルは削除してください。

・local.sql

***.sqlファイルはバックファイルとは別で保存してください。データベースの復元の際に使用します。

phpAdminでデータベース復元

先ほどのsqlファイルをphpAdminで復元します。

今回はエックスサーバー での復元を紹介します。

エックスサーバー でphpAdminまで遷移します。左側の項目でデータベースを選択してください データベースをしないと保存できません。また、間違って保存してしまう可能性があるので気をつけてください。

次にインポートのタブを選択してください f:id:ppiko:20200327014120p:plain

ファイル選択で、先ほどの「***.sql」を追加してください f:id:ppiko:20200327013740p:plain

他の項目は標準で下の画像のようになっていると思います。 f:id:ppiko:20200327014201p:plain

画像の入力項目のまま実行してください

以上で、データベースのバックアップは完了です。

FTPでサーバーにバックアップファイルをアップロード

FTPソフトを導入

Macの場合:「FileZilla」

Windowsの場合「FFFTP」

などのWebサイトを公開するためのFTPソフトをダウンロードしてください。導入方法については、省略します。

FTPソフトにバックアップファイルを追加

2.導入方法で、***.sqlとbackwpup__readme.txt、サイト名.pluginlist.txt、manifest.jsonを除いたバックアップファイルをFTPサーバーに追加します。

f:id:ppiko:20200327011631p:plain:w500



画像のようなサーバーのファイル構成になっていると思うので、そのままバックアップしたファイルの中身全てを追加してください。(下記参照) ファイルの容量が大きいと少し時間がかかります。

f:id:ppiko:20200327012633p:plain

追加し終えたらバックアップ復元完了です。

最後に

方法としてはそこまで難しくありませんが、手動で行う部分が多いため、初めてバックアップの復元をした時は復元どころかデータが消えてしまうのではないかと不安でした。

ただ、バックアップの復元を使えるようになると本番環境、ローカル環境全て安心してサイト作成が行えるのでぜひ試してみてください。

無料のWordpressテーマ【OnePress】のヘッダーをカスタマイズする方法

OnePress WordPress
OnePress

目次

  1. 概要
  2. 解決方法

概要

・グローバルナビゲーション以外にヘッダーに文字や画像を追加したい
・ヘッダーのタイトルやロゴの周辺に文字や画像を追加したい等

OnePressのheader.phpは関数で作成されているので、細かいレイアウトの調整が出来ませんでした。 細かいレイアウトの調整のために関数内容部分を子テーマの方で編集したのですが、レイアウトが反映されず困ったので今回の調査した解決方法をOnePressのテーマを使用している方に共有できればと思い記事を書きました。

解決方法

テーマのinc/template-tags.phpのコードをfunctions.phpに追加する

親テーマor子テーマのinc/template-tags.phpの187行目~247行目をコピーする。以下のコードがheaderに当たるコードになります。

add_action( 'onepress_site_start', 'onepress_site_header' );
if ( ! function_exists( 'onepress_site_header' ) ) {
    /**
     * Display site header
     */
    function onepress_site_header() {
        $header_width = get_theme_mod( 'onepress_header_width', 'contained' );
        $is_disable_sticky = sanitize_text_field( get_theme_mod( 'onepress_sticky_header_disable' ) );
        $classes = array(
            'site-header',
            'header-' . $header_width,
        );

        if ( $is_disable_sticky != 1 ) {
            $classes[] = 'is-sticky no-scroll';
        } else {
            $classes[] = 'no-sticky no-scroll';
        }

        $transparent = 'no-t';
        if ( onepress_is_transparent_header() ) {
            $transparent = 'is-t';
        }
        $classes[] = $transparent;

        $pos = sanitize_text_field( get_theme_mod( 'onepress_header_position', 'top' ) );
        if ( $pos == 'below_hero' ) {
            $classes[] = 'h-below-hero';
        } else {
            $classes[] = 'h-on-top';
        }

        ?>
        <header id="masthead" class="<?php echo esc_attr( join( ' ', $classes ) ); ?>" role="banner">
            <div class="container">
                <div class="site-branding">
                <?php
                onepress_site_logo();
                ?>
                </div>
                <div class="header-right-wrapper">
                    <a href="#0" id="nav-toggle"><?php _e( 'Menu', 'onepress' ); ?><span></span></a>
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <ul class="onepress-menu">
                            <?php wp_nav_menu(
                                array(
                                    'theme_location' => 'primary',
                                    'container' => '',
                                    'items_wrap' => '%3$s',
                                )
                            ); ?>
                        </ul>
                        
                    </nav>
                    <!-- #site-navigation -->
                </div>
            </div>
        </header><!-- #masthead -->
        <?php
    }
}

このコードをそのままfunction.phpに追加します。 headerタグがありますので、その部分を編集していただければレイアウトが反映されると思います。

とあるWeb制作会社を立ち上げて役員()になりました。

起業日記

初めまして

初めまして、とあるWeb制作会社を立ち上げて役員()になりました。KEITAと申します。

本来、営業の話や技術の話を目的とした記事をを以前からどこかで投稿したい考えていたのですが、 会社として書いて欲しいと言われ普段文章を書き慣れていない僕からすると、文字の間違えがないかや内容の齟齬がないか等で 一つの記事に時間がかかってしまいそうなので、多少のミス(必ずそれなりに下調べして書きます)が許されそうな少し緩めの個人ブログを開設することにしました。

見て頂いた方の時間の無駄にならないような記事にしたいと思っていますのでよろしくお願いします。

現状

　とあるWeb制作会社を立ち上げて役員()になりました。という事なんですが、実は大学卒業後そのまま会社を仲間と立ち上げました。 ですので、知識もお金も人脈も何もない状態で起業したんですよ。めちゃくちゃですよね。自分もそう思います。 　ただ普通の社会人の人たちのように生活できる自信がなかったですし、普通に就職しても幸せになれる自信がなかったので、 それだったら会社立ち上げて色々経験詰める人生の方がいいやって感じで会社を仲間と立ち上げました。フワッとした理由でやっぱりめちゃくちゃですね。 　 　当然親からの猛反対はありましたし、卒業後そのまま会社を立ち上げたのでお金の面ではかなり苦労しました。今は新しい事業を立ち上げたので さらに苦労していますが、それについては後々書いて行こうと思います。

日記を書くきっかけ

　自分の一日の作業内容を書くことはありますが、地元から離れたところで起業したので、近くに友人がいるわけでもなく、かといって会社の仲間に相談ばかりするのも迷惑ですし、色々な意見がいただける第三者の方に見てもらおうと思い始めました。

終わりに

　ブログ初心者ですのでどうかお手柔らかにお願いします。 基本的に内容はWeb制作の技術的なお話(wordpress、seo)や営業をして思った事などを書いて行こうと思います。 よろしくお願いします。