안녕하세요, 블로그 사이트 독자 여러분. 저는 오늘 출판물을 WordPress HTML 편집기()에서 기사 작성 문제에 전념하기로 결정했습니다.

사실 관리 패널에서 비주얼 편집기를 사용할 수 없는 경우도 있고(대부분 호스팅 문제로 인해 발생함), 비주얼 편집기가 없으면 초보 블로거가 정확하고 아름답게 디자인된 기사를 작성하는 것이 꽤 어려울 것입니다. 예외없이 모든 사람에게 작동하는 간단한 편집기에는 최소한 .

처음 이 블로그를 쓰기 시작하고 엔진에 익숙해졌을 때, 저는 비주얼 편집기를 사용할 수 없었습니다. 다른 버전의 추가 플러그인이나 다른 "탬버린과 함께 춤추는 것"도 도움이되지 않았습니다. 그래서 어쩔 수 없이 기존의 기본 편집기를 마스터해야 했습니다. 다행히 그 무렵에는 이미 하이퍼텍스트 마크업 언어에 꽤 익숙했습니다.

WordPress에서 HTML 편집기만 사용하기

하지만 요점은 HTML이 아니라 일상적이고 자주 발생하는 작업을 편리하게 수행하는 데 있었습니다. 예, 기본 WordPress 편집기를 사용하면 하나의 버튼을 사용하여 굵게(STRONG 태그) 및 기울임꼴(EM) 태그를 추가하고, 링크, 인용문, 그림, 번호 매기기 및 글머리 기호 목록을 삽입하고, 다양한 코드를 강조 표시하는 등의 작업을 수행할 수 있습니다.

하지만 나에게는 이것만으로는 충분하지 않았습니다. 왜냐면... 기사 텍스트에서 나는 다양한 수준(H2에서 H5까지)의 내부 제목을 적극적으로 사용하고 특수 태그로 코드(PHP, CSS 등)를 강조하는 등 훨씬 더 많은 작업을 수행했습니다.

따라서 기본 WordPress 편집기의 표준 도구 세트에 포함되지 않은 모든 항목은 키보드에서 수동으로 입력해야했으며 이로 인해 게시물 작성 작업이 전혀 쉬워지지 않았고 매우 짜증났습니다.

하지만 이 문제는 HTML 편집기 도구 모음에 원하는 만큼 추가 버튼을 추가하고 특정 작업에 맞게 프로그래밍할 수 있는 멋진 WP 플러그인 Post Editor Buttons 덕분에 성공적으로 해결되었습니다.

오늘 우리는 블로그 사이트에 도움이 된 뉘앙스와 기술을 생략하지 않고 WP에서 게시물 작성을 처음부터 끝까지 자세히 살펴볼 것입니다. 다른 사이트에 게시됨) 순 방문자 수가 수천 명 수준에 도달합니다.

즉, 이 간행물은 기사의 자세한 부록이 될 것입니다(원제목은 아니지만, 한 독자의 리트윗에서, 그러나 제 생각에는 원래 이름보다 훨씬 더 성공적이라고 생각합니다.)

해당 기사에서는 검색 엔진의 트래픽(방문자) 유입에 영향을 미치는 뉘앙스에 대해 설명했으며, 이 게시물에서는 종종 매우 중요하고 언뜻 보기에는 명확하지 않은 세부 사항을 조사하려고 합니다. .

또한 초보 블로거 또는 자신의 프로젝트를 만들고 실행하려고 생각하는 사람들은 원하는 결과를 얻기 위해 무엇을 어디서 해야 하는지 안다면 WordPress의 모든 것이 얼마나 쉬운지 배우는 것이 흥미롭지 않을 것이라고 생각합니다. 자, 소개가 늦어졌습니다. 이제 바로 자료 발표를 진행할 시간입니다.

아직 자신의 WP 블로그가 없지만 블로거가 되고 싶은 분들, 또는 다른 블로그 엔진이나 무료 플랫폼에서 WordPress로 이동하려는 분들을 위해 설치 및 초기 구성에 대한 자료 링크를 제공하겠습니다. :

WordPress HTML 편집기에서 기사 작성을 시작해 보겠습니다.

따라서 새 기사를 작성하려면 관리자 패널(http://sait.ru/wp-admin/)로 이동하여 왼쪽 메뉴에서(표준 WP 관리자 패널 디자인을 사용하는 경우) " "게시물" 영역에 "새" 항목 추가

결과적으로 기사(게시물)를 추가하기 위한 표준 페이지가 열리며 여기에는 제목을 입력할 수 있는 필드와 게시물의 텍스트를 입력할 수 있는 큰 필드가 있습니다.

이를 위해 해당 필드에 제목 텍스트를 입력할 때 트릭이 없지만 매우 중요한 것은 입력 방법이 아니라 키워드를 사용해야 한다는 사실입니다. 게시물 제목()을 얼마나 잘 선택할수록 특정 검색어에 대한 검색 결과에서 게시물의 순위가 높아집니다.

그러나 동시에 WordPress의 기사 제목은 해당 텍스트와 잘 연관되어 있어야 합니다(포스트의 텍스트와 관련성이 있어야 함). 또한, 검색 결과에 표시되며, 해당 게시물이 얼마나 매력적인지에 따라 향후 출판물의 운명이 결정됩니다(클릭하지 않으면 행동 요인이 악화되어 상위권에서 이탈하게 됩니다).

보통 저는 기사 자체를 작성한 후 제목의 최종 버전을 작성합니다. 때로는 모든 중간 부제목을 별도의 텍스트 파일에 복사하고 모든 내용을 눈앞에 두고 여기에 언급된 모든 내용을 고려하여 일반적인 부제목을 만듭니다.

이것이 아마도 내 제목이 매우 긴 이유일 것입니다. 그러나 실습에서 알 수 있듯이 아무런 문제가 없습니다. 검색 엔진은 내 제목을 훌륭하게 처리하며 검색 결과에는 검색어의 단어가 나타나는 TITLE 부분이 표시됩니다.

검색 엔진에서 페이지를 홍보하는 데 제목이 왜 그렇게 중요한가요? 예, 왜냐하면 특정 검색어에 대한 기사의 관련성(규정 준수 정도 및 기타 복잡한 단어)을 결정하는 주요 기준이기 때문입니다.

아니요, 그렇지는 않습니다. 게시물 제목이 아니라 페이지 제목 TITLE은 특정 검색어에 대한 위치를 결정할 때 검색 엔진에 대한 가장 중요한 기준입니다(자세한 내용 참조).

그렇다면 WP의 게시물 제목은 그것과 어떤 관련이 있습니까? 그리고 올바른 TITLE은 기사 제목과 전체 블로그 제목을 순서대로 구성해야 한다는 사실에도 불구하고. 그런데 WordPress에서 TITLE의 올바른 형식을 구성할 수 있습니다. 이 플러그인은 정말 훌륭하고 동시에 내부 최적화와 관련된 많은 문제를 해결할 수 있습니다.

HTML 논리적 강조 태그 "STRONG"과 다른 굵은 강조 태그 "B", "EM"과 "I" 간의 차이점에 주목하고 싶습니다. 첫 번째 태그(STRONG 및 EM)는 텍스트의 중요한 사항에 대해 독자의 관심을 끌기 위해서만 사용되어야 하는 것이 아닙니다.

검색 엔진은 텍스트에서 강조되지 않은 일반 단어에 비해 이러한 강조 태그(STRONG 및 EM)로 강조 표시된 단어와 문구를 더 큰 가중치로 고려합니다. 그러나 이제는 너무 멀리 가지 않도록 매우 조심해야 합니다.

H1-H6 수준에서 최적의 제목 구조 선택

이제 H1-H6 제목 태그는 블로그 기사에서 필요한 단어와 문구를 강조하는 데 사용할 수도 있습니다.

TITLE과 마찬가지로 이러한 내부 부제목에는 검색 엔진에서 순위를 매길 키워드와 문구가 포함되어야 합니다. 검색에서는 일반 항목보다 더 큰 가중치를 적용하여 고려합니다. 그러나 다시 말하지만, 어떤 상황에서도 키를 스팸해서는 안 됩니다. 현대 판촉 조건에서는 이로 인해 어려움을 겪을 수 있기 때문입니다.

또한 내부 부제목(일반적으로 레벨 H2, H3 이상)은 텍스트를 구조화할 수 있는 추가 기회를 제공하여 독자의 인식을 향상시킵니다.
그러나 WordPress 블로그 페이지에 사용되는 제목 수준(H1~H6)과 관련된 또 다른 페이지 최적화 문제가 있습니다.

웹 페이지에서 제목 수준을 분배하는 주요 방법은 전체 기사의 제목을 H1 태그(가장 높은 수준)로 묶어서 페이지에 하나여야 하며 텍스트의 모든 내부 부제목은 다음으로 시작하는 것입니다. H2.

그런데 WordPress에서 특정 사이트의 헤더가 어디에, 어떤 수준에서 사용되는지 명확하게 확인할 수 있는 매우 편리한 방법을 추천하고 싶습니다. 이것은 FireFox()용 플러그인입니다.

따라서 이 플러그인의 메뉴에서(해당 메뉴가 브라우저 상단에 추가됨) "개요" - "헤더 개요" 항목을 선택하면 현재 브라우저에 열려 있는 웹 페이지에 있는 모든 항목에 원이 표시됩니다. 여러 색상의 직사각형이 있고 그 옆에는 레벨이 H1 -H6이라는 캡션이 있습니다.

위 그림에서 볼 수 있듯이 기사 제목의 수준을 H1이 아닌 H2로 설정했는데, H1은 전체 프로젝트에 대한 설명을 포함하는 데 사용됩니다. 특정 기사가 아닌 블로그 전체에 적용됩니다.

이 Maul은 그의 기사 중 하나에서 사이트의 H1 레벨 헤더가 모든 웹 페이지에서 동일해야 한다고 언급했지만 실제로는 어떤 식으로든 자신의 아이디어를 정당화하지 않았습니다. 그러나 나는 그의 계획을 그대로 사용합니다. 내부 부제목에는 H3 및 H4(때로는 H5) 태그를 사용합니다.

뉘앙스가 하나 더 있습니다. 메인 페이지에서 내 게시물의 제목은 정식 버전이 있는 웹페이지로 연결되는 링크이지만, 게시물의 전체 텍스트가 포함된 이 페이지 자체에서는 기사 제목이 더 이상 링크가 아닙니다. 이렇게 하면 더 좋을 것 같다는 글을 어디선가 읽었습니다.

이제 WordPress에서 기사 등의 HTML 제목 태그 수준을 변경하는 방법이나 제가 했던 것처럼 모두에 대해 하나의 공통 H1 수준을 추가하는 방법에 대해 조금 이야기해야 합니다.

이렇게 하려면 예를 들어 FTP를 통해 블로그가 있는 호스팅 서버에 연결해야 합니다. 필요한 모든 파일은 사용 중인 WordPress 테마(템플릿)가 있는 폴더에 있으며 다음 경로에서 찾을 수 있습니다.

/wp-content/themes/테마 이름/

WordPress 테마 파일(템플릿)의 구조와 목적을 더 명확하게 이해하려면 이 출판물의 맨 처음에 있는 기사(목록)를 읽어 보시기 바랍니다.

메인 페이지(INDEX 파일이 모양을 담당함)와 기사의 전체 버전(SINGLE 파일)이 있는 페이지에 있는 기사의 기본 제목 수준을 어디에서 변경할 수 있는지 살펴보겠습니다.

먼저 편집을 위해 INDEX를 열어 보겠습니다. 여기에서 WordPress 기사의 제목은 HTML 태그 H2(두 번째 수준)에 포함되어 있으며 추가로 링크 태그 A에 포함되어 있으므로 링크입니다.

스레드)

이 기술을 사용하면 불필요한 괄호를 피할 수 있습니다. 또한 이러한 코드는 HTML 컨텍스트에 잘 들어맞습니다.

14. 절차적 접근과 객체지향 접근

객체 지향 프로그래밍은 다소 명확한 구조를 고수하는 데 도움이 되지만 이것이 애플리케이션 작성의 절차적 원칙에서 벗어나야 한다는 의미는 아닙니다.

객체는 데이터를 표현하는 데 적합합니다. 예:

클래스 사용자( public $username; public $first_name; public $last_name; public $email; public function __construct() ( // ... ) public function create() ( // ... ) public function save() ( / / ... ) 공개 함수 delete() ( // ... ) )

절차적 방법에는 고유한 이점이 있습니다.

함수 capitalize($string) ( $ret = strtoupper($string); $ret .= strtolower(substr($string,1)); return $ret; )

15. 오픈 소스 코드 읽기

일반적으로 오픈 소스 프로젝트는 다수의 개발자에 의해 작성됩니다. 이러한 관점에서 유사한 프로젝트에서 작성된 코드를 공부하는 것은 경험을 쌓는 데 도움이 될 수 있습니다. 그러니 이것에 시간을 낭비하지 마십시오.

16. 리팩토링

리팩토링은 기능 손실 없이 코드를 변경하는 것입니다. 가독성을 높이기 위해 사용할 수도 있으며, 버그를 수정하거나 기능을 추가할 여지가 없습니다. 코드 구조를 약간만 변경하면 됩니다.

이 기사가 도움이 되었기를 바랍니다. 뭔가 빠졌나요? 당신의 경험을 공유해보세요!

WordPress.com에서는 잠재적으로 위험한 코드를 블로그에 사용하는 것을 허용하지 않지만 보기 위해 소스 코드를 게시할 수 있습니다. 우리는 소스 코드 형식을 유지하고 일부 언어에 대한 구문 강조 기능도 제공하는 태그를 만들었습니다. 예:

#버튼( 글꼴 두께: 굵게; 테두리: 2px 단색 #fff; )

위의 코드 조각과 유사한 결과를 얻으려면 다음 태그로 코드를 래핑하세요.

귀하의 코드

"언어" 매개변수는 언어 및 구문 강조 규칙을 정의합니다. 다음 값이 지원됩니다.

• 액션스크립트3
• 저온융합
• csharp
• 델파이
• 얼랭
• fsharp
• 그루비
• 자바스크립트
• javafx
• MATLAB
• 파워셸
• 파이썬
• 스칼라

"언어" 매개변수 값이 지정되지 않은 경우 "텍스트" 값이 사용됩니다(구문 강조 표시 없음).
"code" 태그 사이의 코드는 표시를 위해 자동으로 인코딩되므로 HTML 요소나 이와 유사한 것에 대해 걱정할 필요가 없습니다.

구성 옵션

태그는 모양을 사용자 지정하는 데 사용할 수 있는 다양한 구성 옵션도 지원합니다. 사용은 전적으로 선택 사항입니다.

• 자동 링크(true/false) - 코드의 각 URL이 하이퍼링크로 표시됩니다. 기본값: 참.
• 축소(true/false) - true로 설정하면 페이지가 로드될 때 코드 영역이 축소됩니다. 확장하려면 클릭해야 합니다. 이는 큰 코드 조각에 유용합니다. 기본값은 거짓입니다.
• firstline (number) — 줄 번호 매기기가 시작되는 번호를 결정합니다. 기본값: 1.
• 거터(true/false) - false로 설정하면 줄 번호가 숨겨집니다. 기본값: 참.
• 강조 표시(쉼표로 구분된 숫자) - 강조 표시할 줄 번호입니다(예: "4,7,19").
• hmtlscript(true/false) - true로 설정하면 HTML/XML 코드가 강조 표시됩니다. 이는 HTML 내부에 PHP와 같은 혼합 코드를 게시할 때 유용합니다. 일부 언어에서만 작동합니다. 기본값: 거짓.
• light (true/false) - true로 설정하면 줄 번호와 도구 모음이 숨겨집니다. 이는 한 줄 또는 두 줄의 코드 조각을 게시할 때 유용합니다. 기본값: 거짓.
• padlinenumbers(true/false/integer) - 0으로 줄 번호 채우기를 제어할 수 있습니다. true 값은 자동 완성을 설정하고, false 값은 완성을 비활성화하며, number는 줄 번호에 고정된 문자 수를 설정합니다.
• 도구 모음(true/false) - false로 설정하면 코드 위로 마우스를 가져갈 때 버튼이 있는 도구 모음이 표시되지 않습니다. 기본값: 참.
• 줄 바꿈(true/false) - false로 설정하면 줄 바꿈이 비활성화됩니다. 줄이 길면 가로 스크롤 막대가 나타납니다.
• title (string) – 코드 제목입니다. 축소 옵션과 함께 사용하면 유용할 수 있습니다.

위 매개변수 사용의 예:

이 줄은 강조 표시되지 않습니다. 이 줄은 강조 표시됩니다. 이 줄은 강조 표시됩니다. 이 줄은 강조 표시되지 않습니다. 이것은 최대 4자의 줄 번호가 0으로 채워진 짧은 코드입니다. //이 예에서는 줄 바꿈이 비활성화되었습니다. 전체 텍스트를 읽으려면 스크롤 막대를 사용해야 합니다. 또한 이 예에서는 줄 번호 매기기가 비활성화되고 도구 모음이 숨겨집니다.

그리고 이것은 더 큰 코드 조각입니다. 여기서는 PHP 언어가 선택되었으며 행 번호 12가 강조 표시되었습니다.

WordPress.com 코드 예 WordPress.com 코드 예 이 줄은 강조 표시되어 있습니다. 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우, 매우 긴 줄입니다. 스마트 탭의 예입니다. 워드프레스닷컴

감사의 말
이 기능을 구현하기 위해 SyntaxHighlighter 프로젝트(저자 Alex Gorbatchev)가 사용됩니다. 사용자는 적절한 설정을 할 수 있습니다