웹사이트 검색

WordPress 게시물에 사용자 정의 코드를 작성하는 방법

WordPress 게시물에 추가 코드를 작성하거나 포함하려는 데에는 여러 가지 이유가 있습니다. 광고를 표시하거나, 웹 사이트의 특정 섹션에 고유한 스타일을 적용하거나, 관심을 끌기 위해 일부 텍스트나 콘텐츠를 표시해야 할 수도 있습니다. 하지만 더 나은 사용자 경험을 제공하기 위해 다양한 시각적 효과를 얻기 위해 코드를 추가할 수도 있습니다.

이러한 모든 이유와 기타 이유는 타당하지만 사용자 정의 코드로 무엇을 달성하려고 하든 코드 작성 과정은 힘들거나 완전히 어려울 수 있습니다! 이 튜토리얼에서는 다음 영역을 다룹니다.

  • 코드처럼 보이지만 코드처럼 동작하지 않는 코드 추가(코드 줄을 보여주거나 웹 사이트의 모양을 개선하려는 경우)
  • 코드처럼 동작하도록 의도된 코드를 추가합니다. Google Adsense 광고와 같은 스크립트 광고

이 두 가지 범주 아래에서 HTML, CSS, Javascript와 같은 프로그래밍 코드를 조금 살펴보고 광고와 <div> 컨테이너의 아름다움을 살펴보겠습니다. 이제 더 이상의 팡파르 없이 본론으로 들어가 코드를 작성해 보겠습니다.

코드처럼 보이지만 코드처럼 동작하지 않는 코드 추가

사용자가 복사하여 붙여넣을 수 있는 코드(웹 디자이너 또는 개발자일 수 있음)를 보여주고 싶다면 한 줄만 끊어도 코드가 엉망이 되어 작업 전체가 엉망이 될 수 있으므로 올바르게 수행하는 것이 중요합니다. WordPress에서 코드를 해석하는 방식은 HTML을 사용하는지 아니면 Visual Post 편집기를 사용하는지에 따라 다릅니다. 시각적 편집기에 코드를 직접 입력하면 생성하려는 효과가 발생하지 않습니다. 시각적 편집기는 코드를 일반 텍스트로 간주하기 때문입니다. 즉, 웹 브라우저는 코드를 "코드"가 아닌 일반 텍스트로 해석합니다.

반면에 HTML 게시물 편집기는 사용하는 모든 HTML 또는 CSS 마크업을 인식합니다. 즉, 웹 브라우저에서 해석되어 레이아웃이 엉망이 되고 콘텐츠가 이상하게 보일 수 있습니다. 예를 들어, 비주얼 편집기의 <div>는 일반 텍스트로 해석되어 결과는 <div>가 됩니다. 하지만 HTML 편집기의 <div>는 HTML 마크업으로 해석되어 결과적으로 컨테이너가 생성됩니다.

HTML 연습

실제로는 쓸데없는 연습이지만, 내가 의미하는 바를 더 명확하게 파악하기 위해 시도해 볼 수 있습니다. HTML 편집기를 열고 <div>를 입력한 후 초안으로 저장하면 됩니다. 초안이 저장되면 '게시물 미리보기'를 클릭하여 엉킨 웹사이트를 확인하세요. 걱정하지 마세요. 영구적이지 않으며 초안을 휴지통으로 보내면 됩니다. 이제 사업으로 돌아갑니다.

일반적으로 코드를 두 가지 방법으로 사용할 수 있습니다. 첫째, 한 줄(또는 단락) 내의 코드를 사용하여 코드에 대한 요점을 명확히 할 수 있습니다. 둘째, 다음과 같이 코드를 블록에 작성하고 강조 표시하고 넣을 수 있습니다.

<html>

<head>

<title>Writing Code in WordPress Posts Tutorial</title>

<link rel="stylesheet" type="text/css" href="somefile.css"/>

</head>

<body>...</body>

</html>

위의 효과를 얻기 위해 와 같이 작성된 코드 태그를 사용합니다. 코드는 여기에 들어갑니다. WordPress 사이트 및 사용 중인 게시물 편집기(비주얼 또는 HTML)에 따라 화살표(<  >)를 대괄호( [ ] )로 대체하세요. 표시하려는 코드는 여는 태그()와 닫는 태그() 사이에 있어야 합니다. 예를 들어, 단락 내에서 코드를 사용하려면:

코드 태그는 HTML이 아닌 텍스트를 코드처럼 보이게 만들지만 웹 브라우저에 HTML 마크업을 해석하거나 게시물에서 이를 제거하라고 지시하지는 않습니다. 이는 브라우저가 여전히 HTML 마크업을 인코딩하여 코드에 HTML 태그를 표시하기 어렵게 만들 수 있음을 의미합니다. 그러나 확장 문자나 문자 엔터티를 사용하여 모든 브라우저를 속이는 < > 문자를 나타내면 이 문제를 극복할 수 있습니다. 예를 들어…

...새 컨테이너(<div> 덕분에)와 제목(<h1>)을 생성하여 웹 페이지를 엉망으로 만들 것입니다. 그러나 문자 엔터티를 사용하여 < > 화살표를 대체하면 이 동작을 방지하고 원하는 대로 코드를 출력할 수 있습니다. 따라서 위의 코드는 다음과 같습니다.

강조 표시된 코드 블록 생성

코드 블록(또는 텍스트)을 강조 표시하여 다음과 같은 것을 얻으려면 다음과 같이 하십시오.

다음과 같이 컨테이너에 코드(또는 텍스트)를 넣는 것으로 시작합니다.

그런 다음 CSS를 사용하여 직접(위 이미지 참조) 또는 테마의 기본 폴더에 있는 style.css 파일을 통해 스타일을 추가합니다.

코드 태그 스타일 지정

코드 태그는 <body>의 글꼴 크기를 사용하고 기본적으로 텍스트를 고정 폭 글꼴로 배치합니다. 코드가 원하는 대로 보이도록 모든 것을 변경할 수 있습니다. 추가하기만 하면 됩니다…

 code{font-size:1.2em; color:#000; font-weight:normal;}

...또는 style.css와 유사한 것입니다. 스타일은 무제한이며 모든 것은 개인 취향에 따라 다릅니다. 주저하지 말고 스타일을 멀리하세요.

코드처럼 동작하는 코드 추가

이 섹션은 광고나 기타 스크립트를 표시하려는 경우 특히 유용합니다. 게시물 내의 자바스크립트 스니펫. 게시물의 광고를 관리하는 데 도움이 되는 Quick Adsense와 같은 플러그인이 있지만 완전히 제어할 수 있는 독립형 스크립트를 설치하는 데 관심이 있을 수 있습니다.

광고가 단순한 이미지와 링크인 경우 업로드 유틸리티를 통해 게시물에 광고를 추가할 수 있습니다. 이미지를 업로드하고 링크(및 캡션)를 입력하면 작업이 완료됩니다. 하지만 일반적인 이미지처럼 광고를 왼쪽, 오른쪽 또는 중앙에만 정렬할 수 있으므로 이 방법은 제한적입니다. 또는 HTML 편집기를 사용하여 게시물 내에 컨테이너를 만들 수 있습니다.

예 :

<div id="ad1">

<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>

</a>

</div>

광고를 원하는 곳에 정확히 이 컨테이너를 만드세요. 즉, 광고를 추가하기 전에 게시물을 준비해야 합니다. 컨테이너가 준비되면 원하는 대로 스타일을 지정할 수 있습니다. position 속성을 사용하여 style.css를 사용하여 이동할 수 있습니다. 게시물 내에서 Google Adsense 광고를 실행하려는 경우 플러그인인 Quick Adsense를 사용하거나 컨테이너를 만들고 다음과 같이 광고 코드를 배치할 수 있습니다.

<div id="ad1">


<script type="text/javascript"><!--

google_ad_client = "ca-pub-1289628145978703";

/* vistamediainc1 */

google_ad_slot = "7102844977";

google_ad_width = 468;

google_ad_height = 60;

//-->

</script>

<script type="text/javascript"

src="//pagead2.googlesyndication.com/pagead/show_ads.js">

</script>


</div>

참고 1: Google 광고는 자바스크립트 기반이며 사용자가 컴퓨터에서 자바스크립트를 활성화한 경우 모든 주요 웹 브라우저에서 해석될 수 있습니다.

참고 2: 게시물과 웹사이트가 망가지는 것을 방지하려면 웹사이트에 적합한 광고 크기를 선택해야 합니다.

추가 작업 없이 모든 게시물(현재 및 향후 게시물)에 표시되는 영구 광고를 추가하려면 단일 게시물 템플릿 (single.php)을 편집해야 합니다. ). single.php의  < – – END post-entry-meta – -> 바로 뒤에 다음 코드를 추가하여 모든 게시물 상단에 468x60픽셀 광고를 배치했습니다.< /강한>

<div id="ad1"> <script type="text/javascript"><!--

google_ad_client = "ca-pub-1289628145978703";

/* vistamediainc1 */

google_ad_slot = "7102844977";

google_ad_width = 468;

google_ad_height = 60;

//-->

</script>

<script type="text/javascript"

src="//pagead2.googlesyndication.com/pagead/show_ads.js">

</script>


</div>

물론, 본인의 Google Ads를 사용해야 합니다 ? 이것이 내 블로그에 Google Adsense 광고가 나타나는 방식입니다:

single.php를 찾으려면 관리 패널 –>> 모양 –>> 편집기 –>> Single.php로 이동하세요. single.php가 열리면 검색을 사용하세요. < – – END post-entry-meta – ->를 찾으려면 (Ctrl + F) 바를 사용하세요.

컨테이너를 그대로 두거나 필요에 따라 style.css를 사용하여 스타일을 지정할 수 있습니다. 그리고 모든 변경 사항을 저장하는 것을 잊지 마세요. <div> 컨테이너는 정말 유용하며 CSS와 약간의 창의성을 결합하면 WordPress 사이트에서 많은 것을 얻을 수 있습니다. 이는 귀하의 웹사이트 어디에든 코드(또는 실제로는 무엇이든)를 배치하는 데 도움이 될 수 있습니다.

도구 상자

WordPress 게시물에 사용자 정의 코드를 작성하는 방법에 대해 자세히 알아보려면 다음 리소스를 확인하시기 바랍니다.

  • 게시물에 코드 작성
  • 재미있는 캐릭터 개체
  • 게시물에 자바스크립트 사용하기
  • WordPress 게시물에 HTML 사용
  • 안전한 WordPress 코드 작성(슬라이드 공유)

글쎄, 그게 다야. 우리는 처음에 설명했던 영역을 다루었습니다. 하지만 이 게시물의 개념을 이해하지 못하거나 제안이나 의견을 추가하고 싶다면 아래 댓글 섹션에서 의견을 공유해 주세요!