戻る

WordPress詰碁 投稿にhtmlを組み込む

2024/02/18

WordPressアイコン




概要

WordPressで構築した囲碁部のサイトに、詰碁の投稿記事を載せることになった。

各問題に対して出題画像を表示し、ヒントと回答画像はクリックするまで見えなくしておく。

ボタンや画像をボップアップするとテキストなどが表示されるようなプラグインは何個か出てくるが、いずれも機能が多すぎて使いにくかったり、画像サイズを変えられなかったりする。

ということでhtmlとJavaScriptで作ることにした。

出来る限りhtmlの知識がなくても記事投稿できるようにしなければWordPressを使う意味がない。

htmlにはcss部分を含ませ、javascriptもhtmlに<script>と</script>内に直接コード記入する。画像は直接メディアライブラリのurlを指定する。



メディアライブラリ



投稿の作成



画像ファイルのURLをコピー



htmlを編集



プレビュー


作例

作例



htmlコード


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>詰碁コーナー</title>
  <style>
    #text {
      width: 90%;
      margin: 20px auto;
    }

    #text p {
      text-align: left;
    }

    #container {
      width: 60%;
      margin: 20px auto;
    }

    #questionImage,
    #hintText,
    #answerImage,
    #answerText {
      display: none;
      margin: 10px auto;
      max-width: 100%;
      height: auto;
    }

    #questinImage {
      display: block;
    }

    button {
      padding: 8px;
      margin-left: 20px;
    }
  </style>
</head>

<body>

  <div id="container">
    <! -------------------------------------"出題画像のurl---wordpress media library　url コピー---------------------------->
      <div id="questionImage"><img src="https://ibm-igo.com/wp-content/uploads/2024/02/tsumego001q.png" alt="出題画像">
      </div>
      <br>

      <button id="hintButton">ヒント</button>
      <!-------------------ヒント----------------------->
      <div id="hintText">取られる手を先手で防ぎます。　３分６段</div>
      <br>
      <br>
      <button id="answerButton">回　答</button>

      <! -------------------------------------"回答画像のurl---wordpress media library　url コピー---------------------------->
        <div id="answerImage"><img src="https://ibm-igo.com/wp-content/uploads/2024/02/tsumego001a.png" alt="回答画像">
        </div>

        <!-------------------正解コメント----------------->
        <div id="answerText">　</div>

  </div>

  <script>
    // ヒントボタンのクリックイベント
    hintButton.addEventListener("click", () => {
      if (hintText.style.display !== "block") { hintText.style.display = "block"; }
      else { hintText.style.display = "none"; };
    });

    // 回答ボタンと回答コメントのクリックイベント
    answerButton.addEventListener("click", () => {
      if (answerImage.style.display !== "block") { answerImage.style.display = "block"; }
      else { answerImage.style.display = "none"; };
      if (answerText.style.display !== "block") { answerText.style.display = "block"; }
      else { answerText.style.display = "none"; };
    });
  </script>
  <br>
  <br>
</body>

</html>



戻る