wordpressでサブメニュー(プルダウンメニュー)が背景画像に重なって隠れてしまい、選択できなくなることへの対処法

はじめに

いやー、知ってたんですよ、スマホでveloart-intelligenceのサイトを開き、左上のメニューを展開すると、プルダウンメニューが画像に隠されて選択できないという不具合があること。でもfooter menuからは選択できるし、PCでは問題ないし、色々忙しいし、ということでほったらかしていました。今日INDEXさんのホームページを作っていく中で解決法の関連情報を見つけ、解決したので、その対処法をメモしておきます。

概略

style.cssでz-indexを指定するだけです。

web engineerの方ならみなさん当然ご存知なのでしょうが、私は初心者なので知りませんでした。今回は画像の方を下にしたいので、画像のz-indexをメニューのものより小さくすればOK。とはいえ、具体的な手順としてどうするか、が色々調べても分かりにくかったので、ここにメモしておきます。

対処法

  1. 重なりがある部分のcssファイル部分を特定

    1. wordpressの管理画面に行き 外観→カスタマイズ を選択し、左下のスマホマークをクリックして、不具合を再現する。
    2. 直したい部分で右クリック。今回だと重なっている背景画像上で右クリックする。
    3. 「検証」をクリック
    4. 右に現れたソースの中程の”Filter”と書かれたBoxに”z-index”といれて対象部分を検索する。
    5. 検索で現れた部分の”{“までを最初をコピー。今回私の例ではこちら。
      .wp-block-cover-image.has-background-dim:before, .wp-block-cover.has-background-dim:before {
  2. wordpressテーマのstyle.cssに書き込み

    といっても直接style.cssをいじるのはテーマがアップデートされたりすると困るし、これだけのために子テーマ作るのもなあ、、、という方のために、今回はwordpressの機能の、追加CSSで対応します。
    1. wordpressで 外観→カスタマイズ を選び、「追加CSS」をクリックする。
    2. そこに、先程コピーしたものに続けて、z-indexを指定する。今回は画像を下にしたいので一番小さな値0を入れる。私の例ではこちら。
      .wp-block-cover-image.has-background-dim:before, .wp-block-cover.has-background-dim:before {z-index: 0;
      }
    3. 公開ボタンを押して保存
以上です。

下のサイトを参考にさせていただきました。https://www.clrmemory.com/wordpress/z-index-customize/

終わりに

できましたか?と聞いておきながら、できなかった場合はどうするか知りません。←なんじゃそら。

という訳で、今週は依頼を受けているINDEXさんのホームページ作成が大詰めだったので、homepage作成ネタ三昧で、ベロモービルネタが全然なくて申し訳ありませんでした。来週からはベロモービルネタがバンバン!…あるかな?ではまた明日!

Please follow and like us:
error0

welcart テーマWALDENでYou may also likeの下にぐちゃぐちゃの文字列が出る際の対処法

初めに

今依頼を受けているINDEXのサイトには、wordpressnのwelcart用テーマWALDENというものを使っています。そこで、表題のエラーが出てしまいました。対処法を以下に示します。

対処法

まずぐちゃぐちゃの文字列をコピーして、テキストエディタに貼り付けます。すると、そこに入っている文字列が読めます。今回は以下のエラーメッセージが入っていました。

Warning: Use of undefined constant rand - assumed 'rand' (this will throw an Error in a future version of PHP) in /home/indexid/indexid.xsrv.jp/public_html/porcorosso-web.net/wp-content/themes/welcart_walden/functions.php on line 285

ふむふむ、ここに解決法が書かれていますね。

wordpressで外観→テーマエディター→functions.phpでfunctions.phpのline285に行き、randを’rand’に書き換えます。以上でぐちゃぐちゃの文字は表示されなくなったはずです。

通信エラーで変更できない場合の対処法

上記wordpressからのファイル変更が、通信エラーでできないことがあります。その場合はFTPで変更しましょう。といってもXserverを使っている場合は、FTPソフトを入れる必要はなく、Xserverにもともと入っている機能でできます。

xserverに行き、ログイン→ファイルマネージャーで編集可能です。

今回の場合、functions.phpは以下の場所にあります。

/indexid.xsrv.jp/public_html/porcorosso-web.net/wp-content/themes/welcart_walden/functions.php

終わりに

どうやらWALDENは古く、バージョンアップでwarningになるようになり、それがサイトに表示されてしまっていたのですね。メジャーでないテーマはこういうバージョンアップについていっていない問題があるので大変です。それではまた明日!

Please follow and like us:
error0

localで立ち上げたwordpressサイトをサーバに移行する方法

ことの発端

今まで有限会社INDEXのホームページを、localに試験的にwordpressサイトとして立上げましたが、一応完成したので、INDEXの方に見てもらうため、先方が契約したXserverに入れることにしました。

移行方法概略

  1. 移行先の新しいサーバにwordpressを入れる
  2. 移行元と移行先の両方に「All-in-One WP Migration」というプラグインを入れる
  3. 移行元wordpressからファイルエクスポート
  4. 移行先wordpressでファイルインポート

移行方法詳細

  1. 移行先の新しいサーバにwordpressを入れる
    1. https://saruwakakun.com/html-css/wordpress/xserver を参考にして入れる。(こちらのサイトは、はじめてXserverにwordpressを入れたときにも参考にさせていただきました。)ただし、URLのhttps化はこの時点ではせず、後ですることにしました。というのも、https化でエラーがでたとかいうポストをちらっと見たので。まあ問題ないのかもしれませんが。
  2. 移行元と移行先の両方に「All-in-One WP Migration」というプラグインを入れる
    1. どちらも普通にwordpressから新規プラグインを入れればOK。
    2. さらに移行先の方は、容量upのため、次のプラグインを入れましょう。こちらhttps://import.wp-migration.com/ からextensionをダウンロードして、プラグインを有効化する。すると、uploadファイルサイズが512MBに変更される。これをしておかないと、アップロード可能容量が30MBに制限されていました。
  3. 移行元wordpressからファイルエクスポート
    1. wordpressの左側のペインに出てきたall in one migrationのところからエクスポート→file を選択する。
  4. 移行先wordpressでファイルインポート
    1. 移行先のXserverにあるwordpressから、左側のペインに出てきたall in one migrationのインポートを選び、先程エクスポートしたファイルを選択する。
  5. 移行先wordpressをhttps化
    1. こちらも先程同様 https://saruwakakun.com/html-css/wordpress/xserver を参考にすればOK。

以上は https://techacademy.jp/magazine/7859 を参考にさせていただきました。

終わりに

上記は、容量制限をエクステンションで回避するところ以外は、すんなり行きました。さて、これで移行もできたので、後はクレジットカード関連の情報登録を残すのみです。おつかれちゃーん*

Please follow and like us:
error0

Ubuntu18.04でlocalにwordpress環境を構築する方法

はじめに

さて、本日は、INDEXさんのホームページを作るための準備。サイトをいきなり本番のサーバーに入れるのではなく、まずはlocalにwordpress環境を構築する方法をご紹介します。

LAMP(Linux Apache MySQL PHP)環境の構築

  1. 必要なパッケージをインストール。
    $ sudo apt install apache2 mysql-server php php-mysql php-gd
  2. mysqlの起動確認をする。 ● mysql.service – MySQL Community Server …などと出ればOK。
    $ sudo service mysql status
  3. mysql基本設定。パスワードを設定する。出てくる質問には全て y で答えれば良い。
    $ sudo mysql_secure_installation
  4. mysqlサーバに接続確認。
    1. $ sudo mysql -u root -p
      するとパスワードを聞かれるので、まずsudo のパスワードを入れてから、先程設定したmysqlのrootのパスワードを入れる。Welcome to the MySQL monitor. …などと出ればOK。
    2. mysqlを終了しておく。
    3. mysql> quit
  5. PHPの挙動試験
    1. apacheのdocumentrootを確認する。/etc/apache2/sites-available/000-default.conf にあるDocumentRootを見ればよい(Ubuntu18.04では/var/www/html)。
    2. 確認した場所に”“という内容のtest.phpを作る。 例
      $ echo "" | sudo tee /var/www/html/test.php
    3. http://localhost/test.phpにアクセスして、PHP versionなどが書かれた画面が出ればOK。

phpMyAdminをインストール

MySQLをGUIで操作できるツールphpMyAdminをインストールします。
  1. こちらの公式ページにアクセスして、最新のものをダウンロードします。
  2. ダウンロードしたファイルを展開します。
  3. 展開したディレクトリを、上記で調べたapacheのdocumentrootに置きます。 例
    $ sudo cp -r phpMyAdmin-4.8.5-all-languages/ /var/www/html
  4. アクセスしやすいようにリネームしておきます。
    $ sudo mv /var/www/html/phpMyAdmin-4.8.5-all-languages/ /var/www/html/phpMyAdmin
  5. phpMyAdmi用にユーザー名を用意します。というのも、phpMyAdmin はrootのcredentialsを使えないからです。
    1. まずはmysqlに接続します。
      $ sudo mysql -u root -p
    2. 次に以下のコマンドで、phpMyAdmin用のユーザーを作って、必要な権限を与えます。以下の Your_pass! は自分で決めるパスワードを入れます。デフォルトでは大文字小文字数字特殊文字が必要です。
      mysql> CREATE USER 'phpmyadmin'@'localhost' IDENTIFIED BY 'Your_pass!';
      mysql> GRANT ALL PRIVILEGES ON *.* TO 'phpmyadmin'@'localhost' WITH GRANT OPTION;
      mysql> FLUSH PRIVILEGES;
    3. 動作確認は、 http://localhost/phpMyAdmin/index.php にアクセスして、phpmyadminの画面が出ればOK。次で使うのでそのままにしておく。

    MySQLのユーザー作成

    1. phpMyAdminの画面で、”user accounts→ Add user account”を選択する。
    2. “user name”には wp-user と入れる。”Password”は(大文字小文字数字特殊文字が入った)好きなものを入れる。
    3. “Global privileges”は下の画像のようにする。 もしパスワードが弱くて怒られたら、passwordを生成し直して”go”を押してもうまく行かないので、”User accounts”を押して、最初からやり直す。
    4. 最後に下の方にある”go”を押す。

    MySQLのデータベース作成

    phpMyAdminの画面で”Database”タブを押して、データベース名を wordpress とでもして、右のところでは、”utf8_general_ci”を選択し、右にある”create”ボタンを押す。

    WordPressのインストール

    1. wordpressのダウンロードページに行き、最新版のwordpressをダウンロードする。
    2. 展開する。
    3. 展開したwordpress ディレクトリをlocalhostにコピーする。例 
      sudo cp -r wordpress/ /var/www/html/
    4. ブラウザで http://localhost/wordpress にアクセスする。
    5. “さあ始めましょう”をクリックする。
    6. 先程設定した、データベース名、ユーザ名、パスワード を入れる。
    7. “インストール実行”を押す。

    WordPressのプラグインの更新をできるようにする

    そのままだと、wordpressはプラグインの更新をすぐ要求してきますが、そのままだとFTPの接続情報を聞かれてコケます。(wp-config.phpにdefine(‘FS_METHOD’,’direct’);を書く方法では今はうまく行きません。)そこで、以下を実行すれば無事更新できます。
    1. wordpressのdirectoryへ移動。
      $ cd /var/www/html/wordpress 
    2. ファイルのパーミッションを変更
      $ sudo find . -type d -exec chmod 755 {} +
      $ sudo find . -type f -exec chmod 644 {} +
    3. wp-configはPHPから書き込めないようにする
      $ sudo chmod 400 wp-config.php
    4. 所有者・グループの変更
      $ sudo chown -R www-data:www-data .

    参考

    基本的には、こちらの「クロの試行ノート」を参考にさせていただきましたが、古くて中々うまく行きませんでした。そこで、Qiitaのこちらのページaskubuntuのこちらのページを参考にさせていただきました。また、wordpressのプラグインの更新についてはQiitaのこちらのページを参考にさせていただきました。

    終わりに

    いや〜、疲れました。ほんっと、すぐにソフトがアップデートされて過去のやり方ではうまくいかなくなるので、色んな所から情報を集めなければいけないので、大変ですね。この記事が誰かの役に立てば幸いです。

    Please follow and like us:
    error0

WordPressテーマWelcart Basicにヘッダー動画を追加する方法

ことの始まり

本日も、先日グラスハパ中野さんの講習を受けて、ホームページの改善を行っておりました。今日行ったのはヘッダーに動画を入れる、ということ。

しかし、はじめに参考にしたサイトでは一向に動画が挿入されず、結局3時間位あれこれ費やしてしまいました。ですので、ここにメモしておきます。

環境

私がveloart intelligenceのホームページで使用しているのは、WordpressのWelcart Basicというテーマ。

WordPressのデフォルトテーマのtwenty senventeen等なら、最初からヘッダーの設定で動画を入れれるようですが、Welcart Basicは1手間必要でした。

Welcart Basicテーマへの動画挿入方法

  1. function.phpの編集
  2. 直接function.phpを触るよりも、code snippetsというwordpressプラグインを使用した方が良いと思います。Add Newで以下を入れてsaveすればOK。
    add_theme_support( 'custom-header', array(
     'video' => true,
    ) );
  3. header.phpの編集
  4. 私はx serverと契約しているので、x serverのファイルマネージャに入り、 /ご自身のドメイン名/public_html/サイトトップurl/wp-content/themes/welcart_basic/ (私の例: /veloart-intelligence.com/public_html/store/wp-content/themes/welcart_basic/) にあるheader.phpの最終行に以下を書き込みUTF-8で保存する。 注: 子テーマを作るほうが良いのかもしれませんが、以前子テーマはあまり良くない、という話も読んだし、時間もないのでとりあえず直接編集しちゃいました。
    <?php the_custom_header_markup(); ?>
    
  5. ヘッダー動画の追加
外観→ヘッダー→ヘッダーメディア に、youtube動画のURLを入れれば、動画が再生されるはず。音声はありません。また今度暇な時にやります。また、このままではスマホで動画が再生されません。結構重大ですが、こちらもまた今度やります。

終わりに

今回は、こちらを参考にさせていただきました。

ちょっと急いでいるので、まだまだ完成形ではありませんが、メモとしてヘッダー動画挿入方法をお伝えしました。それではまた!

Please follow and like us:
error0