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

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


이 모든 것들과 다른 것들이 모두 유효한 이유이지만, 사용자 정의 코드로 무엇을 달성하든 코드 작성 프로세스는 신경 뭉치거나 완전히 어려울 수 있습니다! 이 튜토리얼에서는 다음 영역을 다룰 것입니다.

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

이 두 가지 범주에서 HTML, CSS, Javascript와 같은 프로그래밍 코드와 광고에 대한 터치 및

컨테이너. 이제 더 이상 팬 페어없이 비즈니스를 시작하고 코드를 작성해 보겠습니다..

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

사용자가 복사하여 붙여 넣을 수있는 코드 (아마도 웹 디자이너 또는 개발자 인 경우)를 보여 주려면 한 줄 바꿈만으로도 코드가 엉망이되어 모든 작업을 수행 할 수 있으므로 올바르게 수행하는 것이 중요합니다. WordPress에서 코드를 해석하는 방법은 HTML 또는 Visual Post 편집기 사용 여부에 따라 다릅니다. 비주얼 편집기는 코드를 일반 텍스트로 간주하므로 비주얼 편집기에 코드를 직접 입력하면 원하는 효과가 없습니다. 즉, 웹 브라우저는 코드를 “코드”로 해석하지 않고 일반 텍스트로 해석합니다..

반면에 HTML Post Editor는 사용하는 HTML 또는 CSS 마크 업을 인식합니다. 즉, 웹 브라우저에서 해석되어 레이아웃이 엉망이되고 내용이 펑키하게 보일 수 있습니다. 예를 들어, 

비주얼 편집기에서 일반 텍스트로 해석되며 결과는

. 하나,

 HTML 편집기에서 HTML 마크 업으로 해석되어 결과적으로 컨테이너가 생성됩니다..

HTML 연습

실로 무익한 운동이지만, 내가 의미하는 바를 더 명확하게 파악하기 위해 시도해 볼 수 있습니다. 그냥 열어 HTML 편집기, 유형

초안으로 저장하십시오. 초안이 저장되면 “미리보기”를 클릭하여 엉망 웹 사이트. 걱정하지 마십시오. 영구적이지 않으며 임시 보관함 만 휴지통에 버릴 수 있습니다. 이제 사업으로 돌아가.

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



WordPress 게시물 자습서에서 코드 작성


...

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

단락의 코드

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

HTML 태그는 HTML 마크 업으로 해석 될 수 있습니다

… 새로운 용기를 만들 것입니다.

) 및 제목 (

)를 입력하면 웹 페이지가 엉망이됩니다. 그러나 문자 엔터티를 사용하여 < > 화살표를 사용하면이 동작을 피하고 원하는대로 코드를 출력 할 수 있습니다. 따라서 위 코드는 다음과 같습니다.

대신 문자 엔터티 사용

강조 표시된 코드 블록 만들기

코드 블록 (또는 텍스트)을 강조 표시하여 비슷한 것을 얻으려면;

코드 블록

먼저 컨테이너에 코드 (또는 텍스트)를 넣는 것으로 시작하십시오.

HTML 편집기에서이 작업을 수행해야합니다.

그런 다음 CSS를 사용하여 스타일을 직접 추가하거나 (위 이미지와 같이) style.css 테마의 기본 폴더에있는 파일.

코드 태그 스타일 지정

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

 코드 {font-size : 1.2em; 색상 : # 000; font-weight : normal;} 

… 또는 style.css. 무제한 스타일이 있으며 모든 것은 개인 취향에 따라 다르므로 스타일을 버리지 마십시오..

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

이 섹션은 광고 또는 다른 스크립트를 표시하려는 경우 특히 유용합니다. 게시물 내 자바 스크립트 스 니펫 다음과 같은 플러그인이있는 동안 빠른 애드 센스, 게시물의 광고를 관리하는 데 도움이되며, 완전히 제어 할 수있는 독립형 스크립트를 설치하는 데 관심이있을 수 있습니다..

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

예:


광고를 원하는 위치에 정확하게이 컨테이너를 만듭니다. 즉, 광고를 추가하기 전에 게시물을 준비해야합니다. 컨테이너가 준비되면 원하는대로 스타일을 지정할 수 있습니다. style.css를 사용하여 이동할 수 있습니다. 위치 특성. 당신이 실행하려는 경우 Google 애드 센스 광고 게시물 내에서 계속 사용할 수 있습니다 빠른 애드 센스 – 플러그인 – 컨테이너를 만들고 다음과 같이 광고 코드를 배치하십시오.


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

노트 2: 웹 사이트뿐만 아니라 게시물을 엉망으로 만들지 않도록 웹 사이트에 적합한 광고 크기를 선택해야합니다..

추가 작업없이 모든 게시물 (현재 및 미래 게시물)에 게재 될 영구 광고를 추가하려면 단일 게시물 템플릿 (single.php). 다음 코드를 추가하여 모든 게시물 상단에 468×60 픽셀의 광고를 게재했습니다. single.php 직후 < – – END post-entry-meta – ->.


물론 자신의 Google Ads를 사용해야합니다. �� 다음은 Google Adsense 광고가 내 블로그에 표시되는 방식입니다.

워드 프레스에서 코드 작성

찾다 single.php, 당신의 관리 패널 – >> 모양 – >> 편집기 – >> single.php. single.php가 열리면 검색 창을 사용하십시오. (Ctrl + F) 찾아 < – – END post-entry-meta – ->.

원하는대로 컨테이너를 그대로두고 또는 style.css를 사용하여 스타일을 지정할 수 있습니다. 모든 변경 사항을 저장해야합니다. 그만큼

컨테이너는 정말 유용하며 CSS와 창의력을 결합하면 WordPress 사이트를 통해 많은 것을 얻을 수 있습니다. 그것은 당신이 당신의 웹 사이트의 어느 곳에 나 어떤 코드 (또는 실제로)를 두는 것을 도울 수 있습니다.

도구 상자

WordPress 게시물에 사용자 정의 코드를 작성하는 방법에 대한 자세한 내용은 다음 리소스를 확인하십시오.

그게 다야 우리는 처음에 설명했던 영역을 다루었습니다. 그러나이 게시물의 개념을 이해하지 못하거나 제안이나 의견을 추가하려면 아래의 의견 섹션에서 의견을 공유하십시오.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me