WordPress에서 이 코드를 삽입할 위치는 무엇입니까? 테마 파일의 일반적인 구조. HTML 페이지에 HTML 코드를 삽입하는 방법

06.12.2021 윈도우 폰

또한 독자가 텍스트 자체를 입력하는 데 시간을 낭비하지 않고 복사할 수 있도록 기사 자체에 코드를 삽입할 것임을 즉시 명확히 하고 싶습니다. 따라서 이번에는 리소스의 편의성()을 높입니다. 그리고 기사는 더 전문적이고 완성된 것처럼 보일 것입니다. 두 가지입니다.

나는 또한 이 기사의 정보가 우리가 말했듯이 사이트에서 다양한 종류의 추가를 만드는 방법이나 유용한 정보를 공유하려는 사용자에게 유용할 것이라는 점에 주목하고 싶습니다. 그리고 이 정보가 코드라는 것은 중요하지 않습니다. 🙂 그건 그렇고, 이 프로젝트에서 Wp-Syntex 플러그인을 사용하여 표시하는 약간의 비밀을 밝힐 것입니다.

당신은 "왜 우리가 그것을 사용합니까?"라고 묻습니다. 대답은 간단합니다. 맛과 색에는 동지가 없습니다. 농담. 사실 우리가 이 플러그인을 선택한 이유는 사용하기 쉽고 다양한 프로그래밍 언어(css, html, java, javascript, perl, sql 등)에 시각적 스타일을 완벽하게 추가하고 우리의 과부하를 일으키지 않기 때문입니다. 섬기는 사람.

글쎄, 나는 Wp-Syntex에 대해 설명 했으므로 그의 예를 사용하여 WordPress의 기사에 코드를 삽입하는 방법을 보여 드리겠습니다.

먼저 이 플러그인을 설치해야 합니다. 우리는 기사에서이 작업을 수행하는 방법에 대해 이야기했습니다. . 따라서 여기서는 이 작업에 대해 설명하지 않겠습니다.

결과적으로 다음과 같은 출력이 표시됩니다.

표시하고 싶은 코드

또한 이 코드에서 php 대신 css 또는 java와 같은 다른 프로그래밍 언어를 삽입할 수 있습니다. 이 경우 모양의 스타일이 변경됩니다.

Wp-Syntex의 추가 기능

속성을 추가하면 라인즉, 삽입해야 하는 코드는 다음과 같이 시작됩니다.

표시하고 싶은 코드

차이점을 알아차리셨나요?

필요한 작은 속성이 하나 더 있습니다. 탈출... html 문자 코드를 문자 자체로 직접 변환할 수 있습니다. 예를 들어 "& gt"는 ">"로 변환됩니다. 이 기능이 작동하려면 여는 "pre" 태그에 다음 속성을 삽입하십시오.

이스케이프 = "true"

따라서 태그는 다음과 같이 시작됩니다.

< pre lang= "php" line= "1" escaped= "true" >

또한 인터넷에서 우리 플러그인과 함께 작동하고 WP 편집기에 코드 삽입 버튼을 추가하는 다른 플러그인(WP-Syntax Button)을 설치할 수 있다는 정보를 찾았습니다. 나는 게으르지 않았고 항의하기로 결정했습니다.

그것을 설치한 직후, 나는 그것이 오랫동안 업데이트되지 않았고 우리 버전의 Wordpress에서 테스트되지 않았다는 사실에 놀랐습니다. 내가 무슨 말을 할 수 있습니까, 내 두려움은 정당화되었습니다.

WP-Syntax Button을 활성화한 후 우리 기사 중 하나에 자바 스크립트를 삽입하기로 결정했습니다. 나는 산 지침과 권장 사항에 표시된대로 모든 것을했습니다. 기사에 스크립트를 삽입하고 선택하고 "코드" 버튼을 클릭했습니다.

그런 다음 그는 스크립트 출력이 시작되어야 하는 프로그래밍 언어와 줄 번호를 표시했습니다.

내가 이 기사에서 이 실험에 대해 쓴 이유는 무엇입니까? 이를 통해 인터넷에서 정보를 찾을 때 발행일에 주의를 기울이라는 말을 하고 싶습니다. 결국, 이전 기사의 정보가 몇 년 전에 관련이 있었을 가능성이 매우 높지만 현재로서는 단순히 작동하지 않으며 해당 응용 프로그램 또는 구현이 프로젝트의 취약성을 초래할 수 있습니다.

블로그에서 모든 자료를 최신 상태로 유지하고 지속적으로 업데이트를 따르고 필요한 경우 이미 작성된 기사를 조정하려고 노력합니다.

자신에게 최신 정보를 이메일로 받고 싶다면 추천합니다.

비디오 "문서에 HTML 코드를 삽입하는 방법"

친구, 누군가가 이것이 어떻게 수행되는지보고 싶어하면 비디오를 녹화했습니다. 구독할 수 있는 YouTube 채널도 있음을 알려드립니다.

관련 기사:

글이 복잡하지 않기를 바라며 불필요한 문제 없이 html 코드를 웹사이트에 삽입하는 방법에 대해 자세히 설명했습니다.

블로그의 미적 외관을 무시하지 마십시오. 결국, 우리의 독자는 삶에서처럼 옷을 입고 마음에 따라 배웁니다.

그게 다야!

안녕!

안톤 칼미코프

웹사이트에 코드를 삽입하는 방법, html 코드, 카운터 코드, 타사 스크립트 코드를 Artisteer에 삽입하는 방법에 대해 이야기해 보겠습니다. 프로그램 자체에서 코드는 두 곳에 삽입할 수 있습니다. 첫 번째는 "텍스트" 버튼을 클릭하여 바닥글을 만들 때이고 두 번째는 페이지 맨 아래에 내보내기 설정을 지정할 때 " 설명" 탭. 후자의 경우 템플릿을 생성한 후 삽입하는 것이 더 편리합니다.

카운터 코드를 삽입하는 방법

카운터 코드페이지 하단의 그림에 표시된 위치에 삽입할 수 있으며 이것이 가장 논리적인 위치입니다.
템플릿에서 Joomla 카운터 코드메모장으로 템플릿 폴더의 index.php 페이지를 열어 삽입할 수 있습니다. 우리는 행의 맨 아래에서 다음을 찾습니다.

"Designed by 또 다른 가능성이 있다 끼워 넣다이를 수행하기 위해 디버그 위치에 코드가 있는 모듈을 사용하려면 무료 모듈(아래 설명 참조)을 만들고 코드를 여기에 삽입하십시오.

템플릿에서 워드프레스 카운터 코드이 곳(페이지 하단)에서 다음을 수행할 수 있습니다. 끼워 넣다만든 템플릿의 footer.php 파일을 열고 다음 행을 찾습니다.

라인 교체,

PHP 코드:

에 의해 구동< a href= "http://wordpress.org/" target= "_blank" >워드프레스그리고< a href= "http://www.artisteer.com/?p=wordpress_themes"대상 = "_blank"> 워드프레스 테마Artisteer로 만든

측정기 코드로.

템플릿에서 Drupal 카운터 코드~ 할 수있다 끼워 넣다맨 아래에 있는 코드를 교체하여 만든 템플릿의 page.tpl.php 페이지를 엽니다.

PHP 코드:

" " ... t("드루팔"). "". t("및"). "드루팔 테마"... t("로 생성"). "아티스트"; ?>.

카운터 또는 버튼의 코드.

스크립트 코드 삽입, HTML 코드모듈에 삽입할 수도 있습니다. 이는 특정 CMS 사용에 대한 질문이지만 그 중 일부에 대해 설명하겠습니다.

Joomla 모듈에 HTML 코드 삽입

코드를 Joomla 1.5에 삽입하려면(joomla 1.7에서는 유사하게 삽입됨) 새 HTML 모듈을 생성해야 합니다. 관리자 패널에서 확장 프로그램 열기 -> 모듈 관리자 -> 버튼 생성 모듈 -> 사용자 정의 HTML 코드 선택 -> 버튼 다음. 다음으로 우리는 우리가 만든 mod_custom 모듈위치를 설정하고 데이터를 입력합니다. 아래에 에디터가 보입니다. 편집기에서 HTML 버튼을 클릭합니다.

그리고 필요한 스크립트나 배너 코드를 삽입합니다. 참고: TinyMSE 편집기가 사용됩니다. 다른 편집기를 설치한 경우 설치한 HTML 버튼에 HTML 버튼이 없으면 TinyMSE로 전환해야 합니다.

안녕하세요 여러분!

오늘 저는 젊은 웹사이트 제작자들 사이에서 결코 끝나지 않을 주제를 다루기로 결정했습니다.

사이트를 만든 후에는 항상 사이트를 사용자 정의해야 합니다. 일부 설정은 설치된 스킨 템플릿의 파일을 편집하여 수행합니다. 예를 들어 유사한 레코드를 표시하는 코드를 삽입해야 합니다. 그런데 어디에 넣어야 할까요?

아주 자주 뉴비들이 그런 질문을 합니다. 그들은 또한 다른 유사한 문제에 대해서도 걱정하고 있으며, 그 해결 방법은 본질적으로 정확히 동일합니다. 또한 향후 기사에서는 템플릿의 다양한 위치에 코드를 삽입하는 경우가 많습니다. 따라서이 자료는 그 어느 때보 다 유용합니다.

이 기사에서는 WordPress 템플릿에서 코드를 삽입해야 하는 위치를 매우 쉽게 정의하는 방법을 보여 드리겠습니다. 또한 초기 단계에서 귀하와 관련될 수 있는 다른 중요한 사항도 고려할 것입니다.

플러그인을 사용하는 대신 펜으로 코드를 삽입하려는 경우 편집이 필요할 수 있는 파일을 상단부터 살펴보겠습니다. 이러한 옵션이 있기 때문입니다. 나는 그를 환영하지 않지만 가장 게으른 사람들을 위해 다음 기사에서 그러한 플러그인에 대해 설명합니다.

처음에는 비디오 수업을 제공합니다. 비디오가 없으면 아래 텍스트 형식으로 제시된 자료를 이해하기 어려울 것이기 때문입니다.

이제 모든 것을 텍스트 형식으로 자세히 설명하겠습니다.

각 페이지 유형의 출력을 담당하는 파일

코드(스크립트)를 사용한 일부 기능 구현에 대한 다른 블로그의 기사를 많이 읽었다면 다음과 같은 문구를 본 적이 있을 것이라고 100% 확신합니다.

이 코드를 기본 페이지 표시를 담당하는 파일에 붙여넣습니다.
이 코드를 기록 및 기타 표시를 담당하는 파일에 붙여넣습니다.

코드를 삽입해야 하는 파일이 많이 있습니다. 그런데 이 파일들은 무엇입니까? 모든 것이 매우 간단합니다.

메인 페이지 출력 - index.php;
레코드 출력 - single.php 파일;
페이지 표시 - 파일 page.php;
아카이브 및 카테고리 표시 - archive.php;
바닥글 출력 - footer.php;
검색 페이지 출력 - search.php;
사이드바 출력 - sidebar.php;
스타일 파일 - style.css;
404 페이지 출력 파일은 404.php입니다.

이제 그들이 이런저런 파일에 코드를 삽입해야 한다고 말할 때 어디를 봐야 하는지 알게 될 것입니다.

각 파일의 올바른 위치를 결정하는 방법에 대한 질문에 답하는 것만 남아 있습니다.

코드 삽입 위치 결정

먼저 식별할 필요가 없는 장소를 살펴보겠습니다. 템플릿에 관계없이 모두 동일합니다.

모든 템플릿에서 동일한 첫 번째 위치는 Header.php 파일의 영역입니다. 여는 태그와 닫는 태그입니다. .

일부 스크립트는 항상 이러한 태그 사이에 배치되어 사이트의 모든 페이지에서 작동해야 합니다. 즉, 이러한 태그(예: 소셜 버튼) 사이에 스크립트를 배치하고 사이트의 모든 페이지에서 작동하여 이를 표시합니다.

이 태그는 Header.php 파일의 맨 위에 있습니다.

모든 것이 템플릿에 따라 다르기 때문에 그들 사이의 내용은 모든 사람에게 다를 것입니다.

이 코드를 여는 헤드 태그와 닫는 헤드 태그 사이에 붙여넣으라는 메시지가 표시되면 코드를 복사하고 템플릿 파일에서 유사한 영역을 찾은 다음 해당 태그 사이에 붙여넣기만 하면 됩니다.

두 번째 위치는 모든 템플릿에서 동일하며 바닥글 표시를 담당하는 footer.php 파일에 있습니다.

태그 사이에 삽입하는 것만으로 스크립트를 연결할 수 없습니다. Header.php 파일에서. footer.php 파일을 통해 로드할 수도 있으므로 사이트 페이지 로드 속도를 높일 수 있습니다.

사실 페이지가 로드되기 시작하면 위에서 아래로 로드됩니다. 모든 스크립트가 페이지 상단에 있으면 스크립트를 로드하는 데 시간이 걸리기 때문에 콘텐츠 표시 속도가 느려집니다.

우리의 임무는 방문자와 검색 엔진 모두에게 가능한 한 빨리 페이지의 콘텐츠를 표시하는 것입니다. 이 경우 콘텐츠를 먼저 표시한 다음 다른 모든 항목을 로드하기 위해 페이지 맨 끝에 스크립트를 로드하는 것이 좋습니다.

이렇게 하려면 footer.php 파일을 열고 닫는 body 태그 앞에 스크립트를 삽입해야 합니다. 페이지 영역의 끝을 담당하므로 파일 내용의 끝에 위치합니다.

보시다시피 이 영역의 모든 스크립트를 닫는 태그 앞에 가져왔습니다.(파란색 프레임으로 강조 표시됨). 그건 그렇고, 나는 스크립트 자체를 이 영역에 배치하지 않고 파일에서 로드하여 가져왔습니다. 그 후, 나는 내 블로그 속도를 많이 올렸습니다. 이 작업을 수행하는 방법에 대한 별도의 기사가 있습니다. 기다리다!

이 영역에 코드를 삽입하라는 지시를 받았을 때 아무 문제 없이 완료되기를 바랍니다.

좀 더 복잡한 질문으로 넘어가서 다양한 다른 코드가 삽입되는 다른 템플릿 파일의 위치를 결정하는 방법을 배우도록 합시다. 일반적으로 이러한 코드에는 다음이 포함됩니다.

유사한 게시물의 표시
구독 양식 표시
소셜 버튼 등을 표시합니다.

이 모든 것은 내용의 주요 부분, 즉 기사의 끝 부분 뒤에 삽입됩니다. 각각 다른 템플릿 코드가 있으므로 질문에 대한 보편적인 답변 "내 기사 출력 코드의 끝은 어디입니까?"단순히 아니오.

그러나 코드의 끝을 쉽게 정의할 수 있으며 그 후에 필요한 기능을 구현해야 합니다. WordPress 템플릿 선택에 대한 기사에서 이미 이 방법을 부분적으로 보여주었습니다(). 그런 다음 인터넷 브라우저의 표준 기능을 사용했습니다.

이 방법의 전체 본질을 더 잘 이해하려면 이 게시물의 시작 부분에 있는 비디오를 시청하는 것이 좋습니다. 그 안에서 나는 모든 일이 실시간으로 어떻게 일어나는지 보여주었다. 글쎄, 이제 나는 가능한 한 명확하게 설명하려고 노력할 것입니다.

구글 크롬 브라우저를 예로 들어 보여드리겠습니다. 다른 브라우저에서도 이 기능을 사용할 수 있으며 조금 다르게 호출될 수 있습니다.

Google 크롬 - 요소 코드를 봅니다.
Firefox - 요소 탐색
Opera - 요소를 검사합니다.

3가지 브라우저의 원리는 비슷합니다. 이제 템플릿에서 영역을 표시할 위치를 결정하는 방법을 보여 드리겠습니다.

요소 코드 보기로 이동합니다(Google Chrome). 페이지의 빈 영역을 마우스 오른쪽 버튼으로 클릭합니다.

그 후 페이지 하단에 패널이 나타나 페이지의 전체 소스 코드를 보여줍니다. 이를 편집하고 템플릿의 구조와 모양이 실시간으로 어떻게 변경되는지 볼 수 있습니다. 그러나 데이터 변경 사항은 저장되지 않습니다. 이렇게 하려면 템플릿 파일 자체를 편집해야 합니다.

이것이 이 패널의 모습입니다.

화살표로 돋보기(돋보기)를 가리켰습니다. 클릭하면 템플릿의 구조를 검사하고 템플릿이 어떤 블록으로 구성되어 있는지 확인할 수 있습니다. 저는 이 기능을 인스펙터라고 부릅니다.

인스펙터를 클릭한 후 페이지 위로 마우스를 움직이면 마우스를 가져가는 모든 요소가 배경색으로 강조 표시되기 시작하는 것을 볼 수 있습니다. 예를 들어 템플릿 선택에 대한 기사의 스크린샷을 보여 드리겠습니다. 거기에서 나는 게시물의 제목 위로 마우스를 가져갔습니다.

기사 출력 후에 코드를 삽입해야 하는 경우 템플릿 영역을 검사하고 기사의 모든 내용이 포함된 블록을 찾아야 한다고 추측하는 것은 어렵지 않습니다. 블록의 끝과 시작을 모두 검색할 수 있습니다. 즉, 템플릿을 아래쪽과 위쪽에서 모두 검사할 수 있습니다.

그러나 여기에 한 가지 언급이 있습니다. ... 템플릿 파일에 기사가 없기 때문에 기사의 행뿐만 아니라 콘텐츠 자체가 있는 블록을 찾아야 합니다. 콘텐츠를 표시하는 코드만 있으며 블록으로 묶여 있습니다. 닫는 블록 태그 뒤에 있습니다.

코드를 붙여넣어야 합니다.

그래서 우리는 무엇을하고 있습니까? 돋보기 아이콘을 클릭하고 우리 기사가 있는 지역을 검사하기 시작하십시오. 전체 기사의 영역이 강조 표시되면 페이지에서 이러한 부분을 찾아야합니다. 이것은 콘텐츠를 표시하는 블록이 될 것입니다.

예를 들어, 이 블록이 강조 표시되는 방법을 보여주기 위해 작은 콘텐츠로 새 기사를 만들었습니다.

또한 콘텐츠가 포함된 블록을 찾기 위해 주변을 둘러봐야 합니다. 마우스를 가져가면 이 블록의 이름을 보여주는 작은 툴팁이 표시됩니다.

템플릿에서 그런 부분을 찾으면 마우스 버튼을 누르면 이 부분이 활성화 됩니다. 이 블록이 있는 코드 행은 요소 코드 보기 패널에서 자동으로 강조 표시됩니다.

보시다시피, 이 블록은 호버 툴팁에서와 정확히 같은 이름을 갖습니다.

기사의 주요 부분이 표시되는 블록의 이름을 알면 필요한 파일로 이동하여 이 블록 뒤에 필요한 코드를 삽입할 수 있습니다. 포스트 출력 파일(single.php)을 예로 들어 보겠습니다.

메모장에서 파일을 열고 요소 코드 보기 패널에서와 정확히 동일하게 시작하는 코드 행을 찾습니다.

메모장 편집기에서 작업하는 것은 매우 편리합니다. 블록의 여는 태그를 클릭하면 닫는 태그도 강조 표시되기 때문입니다(위 이미지 참조). 종료 태그는 이것이 콘텐츠 출력의 끝임을 나타냅니다. 우리는 소셜 버튼, 관련 게시물 및 기타 기능을 삽입할 수 있습니다.

방금 업데이트에 등록하는 양식과 함께 소셜 버튼을 삽입했습니다.

이것이 페이지에 표시되는 방식입니다.

마찬가지로 다른 템플릿 파일(페이지, 카테고리, 아카이브 ...)에 삽입됩니다.

연습 없이는 이 삽입 방법을 텍스트와 이미지에서 마스터할 수 없을 것입니다. 그러므로 그것을 가지고 시도하십시오. 나는 모든 것이 잘 될 것이라고 확신합니다. 또한 기사 시작 부분에서 비디오를 돕기 위해.

템플릿 파일에서 원하는 파일을 나중에 삽입하기 위해 템플릿 파일의 위치를 결정하는 방법을 알아냈을 때.

마지막 순간이 하나 있다, 이 시점에서 성화할 가치가 있습니다.

템플릿의 functions.php 파일에 개입이 필요한 설정이 많이 있습니다. 그러나 코드를 삽입하는 방법도 이해해야 합니다.

일반적으로 모든 블로그에서 파일의 맨 끝에 닫는 태그?> 앞에 삽입해야 한다고 씁니다.

하지만 이 태그가 파일에 없으면 어떻게 될까요? 예를 들어, 나는 그것을 가지고 있지 않습니다. 그런 상황에서 어떻게? 종료 태그가 없다고 해서 파일이 유효하지 않은 것은 아닙니다. 블로그가 작동합니다. 모든 것이 정상입니다.

이 경우에는 반대 작업을 제안합니다. 파일의 맨 처음, 여는 태그 앞에 있는 코드에 삽입합니다. 아래 이미지를 살펴보십시오.

여는 태그는 빨간색으로 강조 표시되고 삽입된 코드는 파란색으로 강조 표시됩니다.

이것은 하나의 옵션입니다. 파일 끝, 그러나 마지막 코드 앞에 코드를 붙여넣을 수도 있습니다. 이 경우 마지막 코드가 끊기지 않도록 최소한 마지막 코드가 시작되는 위치를 조금이라도 이해해야 합니다.

그게 다야. 갑자기 funsctions.php 파일에 닫는 태그가 없는 동일한 상황이 발생하면 진행 방법을 알 수 있습니다.

템플릿에서 비주얼 스타일 정의

또한 페이지 요소의 디자인 스타일을 보고 변경할 수 있으며 자신의 스타일을 추가할 수도 있습니다. 동일한 요소 관리자가 이를 도와줍니다.

필요한 요소를 찾아 클릭하면 선택한 블록(요소)의 스타일이 코드 보기 패널의 오른쪽 영역에 표시됩니다. 위에서 논의한 것과 동일한 기사 블록에 대한 스타일을 보여 드리겠습니다.

이러한 스타일을 실시간으로 편집하고 이 또는 해당 요소가 어떻게 보이는지 확인하려면 이 패널에서 바로 변경할 수 있습니다. 원하는 스타일의 값을 클릭하고 변경하기만 하면 됩니다.

그러나 변경 사항은 첫 번째 페이지를 새로 고칠 때까지만 유효합니다. 이러한 스타일을 적용하려면 템플릿 스타일시트에 추가해야 합니다. 위의 이미지 중 하나에서 이러한 스타일이 작성된 파일의 이름과 시작되는 정확한 라인을 보여주는 영역을 파란색 프레임으로 표시했습니다.

따라서 스타일시트 style.css를 열고 제 경우에는 890행을 찾으십시오.

여기에서 편집할 수 있습니다. 파일을 저장하고 호스팅에 업로드합니다.

내 컴퓨터의 모든 파일을 편집합니다. 이 경우 문제가 발생하면 변경 사항을 취소할 수 있는 외부 프로그램을 사용합니다. 코드와 스크립트를 사용한 다양한 실험도 마찬가지입니다. 모든 것이 켜져 있습니다.

컴퓨터에 있는 모든 파일에 대해서도 유사한 편집을 수행하는 것이 좋습니다. 이렇게 하려면 먼저 FTP 클라이언트를 사용하여 호스팅에서 컴퓨터로 파일을 다운로드해야 합니다. 나는 이것에 대해 썼습니다. 그런 다음 파일을 열 수 있는 편리한 편집기로 파일을 열면 됩니다. 이를 위해 메모장을 사용합니다.

이것으로 기사를 마칩니다. 다음은 일부 코드 또는 스크립트를 삽입할 위치를 결정하는 까다로운 프로세스입니다. 얼핏 보면 이 절차가 복잡해 보일 수 있습니다. 그러나 모든 것이 매우 간단합니다. 당신은 몇 번 시도하고 그런 질문을하지 않을 것입니다.

물론 특별한 플러그인을 사용하여 블로그에 코드와 스크립트를 삽입할 수 있습니다. 이는 다음 기사에서 확실히 고려할 것입니다. 그러나 그것들을 사용하지 않으려면 이러한 작업을 수행하지 않는 것이 좋습니다. 이렇게 하면 사이트의 불필요한 부하를 제거하여 속도를 높이고 방문자가 더 편리하게 사용할 수 있습니다.

모든 친구들. 이것으로 결론을 내립니다. 댓글에서 질문을 기다리고 있습니다. 알아봅시다. 새로운 자료로 만나요.

안부, 콘스탄틴 크멜레프.

"소셜 미디어 콘텐츠 마케팅: 구독자의 머리에 들어가고 브랜드와 사랑에 빠지는 방법"이라는 새 책을 출간했습니다.

웹사이트를 개선하고, 온라인 비즈니스를 개선하고, 고객 참여를 개선하는 데 도움이 되는 많은 도구가 있습니다. 이러한 도구 중 대부분은 무료입니다. 그러나 웹 개발자가 아니고 사이트에 설치하는 방법을 모른다면 어떻게 하시겠습니까? 이것은 큰 장애물입니다.

아이러니하게 들릴지 모르지만, 귀하의 사이트에 유용한 도구를 개발하는 비즈니스는 자체적인 번영에도 장애물이 있습니다.

웹사이트에 JavaScript 코드/스니펫(조각)을 삽입하는 가장 일반적인 방법에 대해 이야기하여 한 번에 두 가지 문제를 해결해 보겠습니다.

워드프레스에서.
자체 작성 관리자 패널(구식 FTP 사용).
스퀘어스페이스에서
쇼피파이에서.

기사 마지막 부분에서 Wix에 대해 다룰 것입니다. 대부분의 경우 이 플랫폼은 JavaScript 코드 또는 스니펫 설치를 허용하지 않지만 다양한 서비스에 대한 통합 형태로 대안을 제공합니다.

설치 코드를 얻을 수 있는 곳

Crazy Egg 서비스를 예로 들어 설치 코드를 찾을 수 있는 위치를 알아보겠습니다.

프로세스는 표준입니다. 등록 데이터를 입력하고 로드한 후 대시보드로 이동합니다. 거기에서 우리는 코드가 있는 섹션을 찾고 있습니다.

WordPress 사이트에 코드를 삽입하는 방법

특별한 플러그인인 Tracking Code Manager를 사용할 수 있습니다.

추적 코드 관리자를 삽입하려면 사이트 관리자 패널로 이동하여 제어판에서 플러그인 섹션을 찾으십시오.

"새로 추가" 기능을 선택하십시오.

오른쪽에 검색 표시줄이 나타납니다. "추적 코드 관리자"를 입력한 다음 "지금 설치"를 클릭하십시오.

설치가 끝나면 플러그인이 활성화되어 있는지 확인해야 합니다. 설정으로 갑시다.

"새 추적 코드 추가"를 클릭하십시오.

Tracking Code Manager 플러그인 없이 할 수 있습니다. 이 경우 우리의 옵션은 코드를 WordPress 테마의 header.php 파일에 붙여넣는 것입니다(나중에 자세히 설명).

WordPress.com에 코드를 설치하는 방법

워드프레스 사이트와 워드프레스닷컴 사이트는 다른 것입니다.

워드프레스 사이트는 자체 서버에 설치된 CMS에서 관리하는 사이트입니다. 즉, 도메인 이름(myname.com)과 호스팅 비용을 지불했습니다.

워드프레스닷컴 사이트는 무료입니다. 호스팅 비용을 지불하지 않고도 웹사이트를 등록할 수 있습니다. 이 경우 사이트 URL은 myname.wordpress.com이 됩니다. 도메인 이름을 변경하려면 몇 가지 추가 단계를 거쳐야 합니다.

WordPress.com에서 사이트를 실행할 때 설치할 수 있는 JavaScript 코드 및 스니펫 선택이 제한됩니다. 그 이유는 보안 프로토콜에 있습니다. 개발자는 사용자가 플랫폼에 코드를 삽입하는 것을 허용하지 않습니다. 예를 들어 MySpace 개발자가 허용했습니다. 분명히 이것이 사이트가 6년 만에 세계 5위에서 1967년으로 떨어진 이유입니다.

동시에 WordPress.com은 사용자에게 비즈니스 운영에 대한 다양한 보너스를 제공합니다. 예를 들어, Google Analytics와의 통합 또는 소셜 미디어 버튼 추가 기능. 그러나 어떤 경우에는 이것으로 충분하지 않을 수 있습니다.

사용자 지정 관리자 패널에 JavaScript 코드 및 스니펫을 설치하는 방법

FTP 사용. 우리는 기본으로 돌아가야 합니다.

요즘 많은 사이트가 자체 작성합니다. 자체 작성 사이트는 처음부터 생성되었으며 콘텐츠 관리에 CMS를 사용하지 않습니다.

그런 사이트가 있다고 상상해 봅시다. FTP에 대해 기억해야 하기 때문에 WordPress보다 코드를 입력하는 것이 조금 더 어려울 것입니다.

FileZilla와 같은 FTP 관리자를 사용하면 웹사이트에서 서버로 파일과 이미지를 끌어다 놓을 수 있습니다. 이 프로그램을 사용하여 서버에 파일을 추가하거나 다운로드하고, 오래된 파일을 새 파일로 교체하고, 불필요한 데이터를 삭제하고, 도크 이름을 변경할 수 있습니다.

데이터 전송 프로토콜에는 복잡한 것이 없습니다. 20분 후에는 전문가가 된 것처럼 느낄 수 있습니다. 대부분의 사람들에게 가장 어려운 부분은 단순히 서버에 접속하는 것입니다.

서버에 문제가 있는 경우 호스팅 회사에 문의하세요. 1시간이 걸릴 수도 있지만 60분 후에는 알아야 할 모든 것을 알게 될 것입니다. 나는 일반적으로 ScreenRecorder를 통해 이러한 대화를 녹음하는 것이 좋습니다. 또는 최소한 수동으로 메모를 작성하십시오.

FTP 서버에 로그인한 후에는 반드시 로그인하십시오. 실수를 하면 중요한 파일은 아무데도 가지 않습니다. 서버에서 컴퓨터로 모든 파일을 끌어다 놓기만 하면 백업을 만들 수 있습니다.

일반적으로 FTP 관리자 API에는 두 개의 열이 있습니다. 예를 들어 아래 이미지의 왼쪽 열에는 컴퓨터에 저장된 파일이 표시됩니다. 오른쪽 - 서버의 파일.

파일을 변경하거나 추가하려면 한 열에서 다른 열로 끌어다 놓기만 하면 됩니다.

경고

파일을 교체하는 것은 위험합니다. 파일의 새 버전을 이전 버전으로 쉽게 교체하고 더 많은 최신 데이터를 잃거나 실수로 중요한 것을 삭제하거나 또 다른 실수를 범할 수 있습니다. 백업 복사본을 사용하면 이러한 실수를 방지하고 불필요한 문제로부터 자신을 보호할 수 있습니다. 변경하기 전에 모든 파일을 컴퓨터의 별도 폴더에 저장해야 합니다.

header.php를 사용하여 코드를 삽입하는 방법

WordPress를 사용하여 관리하는 웹사이트가 있다고 가정해 보겠습니다. 코드를 삽입하려면 header.php 파일이나 다음과 같은 다른 파일을 찾아야 합니다. 헤더또는 머리.
헤더사이트의 모든 페이지에서 코드 또는 JavaScript 스니펫을 활성화하는 데 필요합니다. Sublime Text와 같은 무료 프로그램을 사용하여 파일을 열 수 있습니다. 도움을 받으면 서버에 있는 유사한 파일이 아니라 컴퓨터에 저장된 파일을 열어야 합니다.

Sublime Text에서 파일을 열면 색상 코드에서 무지개를 볼 수 있습니다. 두려워하지 마십시오. 모든 것이 간단합니다.

모든 페이지는 머리와 본문의 두 부분으로 나뉩니다. 제목은 HTML 코드로 표시됩니다. 그리고... 몸 - 그리고.

사이트를 작동시키고 텍스트를 표시하는 대부분의 요소는 이 두 섹션 사이에 있습니다. 페이지 검색을 사용하여 이러한 태그를 찾을 수 있습니다.
대부분의 경우 닫는 태그 바로 앞에 코드를 삽입할 수 있습니다.

코드 또는 스니펫을 삽입한 후 파일을 저장하고 서버에 업로드하십시오. 준비가 된.

이제 자체 작성 관리자 패널에 대해 설명합니다. 사이트가 수동으로 구축되었고 헤드 또는 헤더 파일을 찾을 수 없는 경우 각 페이지에 수동으로 코드를 삽입해야 할 가능성이 큽니다. 대부분의 경우 이것은 큰 어려움을 일으키지 않습니다.

위 이미지는 4개의 HTML 파일로 구성된 가상의 HTML 사이트입니다. 코드를 삽입하려면 이 모든 파일을 하나씩 열고 각 파일의 태그에 코드 또는 스니펫을 삽입해야 합니다. 그 후에는 프로세스가 표준입니다. 파일을 저장하고 이전 파일 대신 서버에 업로드합니다.

Squarespace 웹사이트에 코드를 삽입하는 방법

Squarespace는 사용자를 쉽게 만들었습니다. "코드 삽입"을 사용하여 JavaScript 코드 또는 스니펫을 삽입할 수 있습니다. 메뉴에서 설정 > 고급 > 코드 삽입 탭으로 이동합니다. 에 코드를 추가할 수 있습니다. 또는 사이트 바닥글.

우리는 설정을 찾습니다.

아래로 스크롤하여 "고급"을 클릭하십시오.

"코드 주입"을 선택합니다.

코드를 붙여넣고 변경 사항을 저장합니다.

Shopify에 코드를 포함하는 방법

제어판에서 온라인 상점 섹션을 찾아 테마를 선택합니다.

원하는 탭에 액세스하려면 "작업"을 클릭하고 "HTML/CSS 편집"을 선택합니다.

조각이 필요합니다.

옵션을 클릭하면 새 조각을 추가할 수 있는 대화 상자가 열립니다.

스니펫에 이름을 지정하고 스니펫 생성 버튼을 클릭합니다.

"tracking snippet.liquid" 영역에 스니펫 코드를 입력합니다. 저장을 클릭합니다.

사이트가 Wix에 있는 경우 코드를 삽입하는 방법

Wix는 빠르게 인기 있는 웹사이트 빌더가 되었습니다. WordPress.com과 마찬가지로 사용자가 코드를 삽입할 수 있도록 제한합니다.

그러나 Wix는 Wix 앱 마켓의 형태로 솔루션을 제공합니다. 여기에서 마케팅, 소셜 미디어 및 분석을 위한 다양한 위젯을 찾을 수 있습니다. 그건 그렇고, 거기에서 가장 필요한 위젯에 투표할 수도 있습니다.

안녕 친애하는 친구. 오늘은 주제에 이어 블로그 로딩 속도를 높이기 위해 플러그인을 "가벼운" 스크립트로 대체할 수 있는 가능성에 대해 이야기해 보겠습니다. 스크립트는 플러그인과 달리 서버의 부하가 훨씬 적기 때문에 사이트 로드 속도가 빨라집니다. 오늘날 많은 플러그인이 있으며 블로거의 많은 문제를 해결할 수 있습니다. 그러나 종종 이러한 플러그인은 더 빠른 스크립트로 대체될 수 있습니다. 때로는 불필요한 플러그인을 완전히 비활성화할 수도 있습니다. 타사 플러그인이 적을수록 사이트 또는 블로그의 로딩 속도가 빨라집니다.

사이트 로딩 속도를 분석하면 어떤 플러그인이 사이트 로딩 속도를 늦추는지 알 수 있습니다. 내가 쓴 확인에 사용할 서비스. 필자의 경우 가장 큰 브레이크는 바로 이 코드에 대한 구문 강조 표시와 함께 기사에서 소스 코드의 예를 표시할 수 있는 플러그인입니다. 이 플러그인을 SyntaxHighlighter라고 합니다.

테스트 결과가 페이지에 맞지도 않았습니다. 물론 코드의 하이라이트는 매우 아름답지만, 알고 보면 하이라이트에 관한 것이 아니다. 대체로 코드의 효율성이 중요합니다. 그리고 코드가 방금 삽입되면 작동하지 않을 가능성이 높습니다.

그리고 오늘은 SyntaxHighlighter 플러그인을 일반 코드로 바꾸는 방법과 블로그 편집 패널에 버튼을 삽입하는 방법을 알려드리겠습니다.

플러그인 없이 기사에 코드를 입력하는 방법

WordPress에서 기사에 소스 코드의 예를 표시하려면 시각적 편집기에서 기사를 입력할 때 테스트 기사로 이동하여 필요한 코드를 태그로 묶는 것으로 충분하다고 알려져 있습니다.

귀하의 코드

그러나 그러한 코드는 기사의 대부분에서 눈에 띄지 않을 것입니다. 따라서 배경색, 글꼴 색상, 테두리 등 여러 스타일을 추가할 수 있습니다. 이렇게 하면 코드가 예제 형식으로 가장 명확하게 표시됩니다.

표시된 코드의 보기를 변경하는 방법

이것은 매우 간단합니다.

옵션 1

태그에 할당할 수 있습니다.

클래스(예: class = "cod")로 지정하고 style.css 파일에서 필요한 스타일을 설정합니다.

.cod (너비: 자동; 배경색: whitesmoke; 테두리: 1px solid # C7C3C3; 테두리 반경: 5px; 색상: # 167dec;)

옵션 2

코드를 삽입할 때 스타일을 직접 설정할 수 있습니다. 다음과 같이 보일 것입니다.

귀하의 코드

그리고 첫 번째와 두 번째 예에서 삽입된 코드가 기사의 범위를 벗어나면 overflow: auto; 속성을 추가해야 합니다. 블록 요소를 조작할 수 있습니다.

이 방법들은 모두에게 좋지만 저는 더 간단한 방법을 원합니다. 일반적으로 게으름 - 진보의 엔진은 이 과정을 촉진할 무언가를 생각해 냅니다.

WordPress 편집 패널에 "코드 삽입" 버튼을 추가하는 방법

WordPress 편집 패널의 간단한 버튼을 사용하면 이 프로세스를 더 쉽게 수행할 수 있습니다. 그리고 이렇게 생겼습니다.

그런 버튼을 자신에게 붙이고 싶다면 몇 분의 시간과 몇 개의 파일이 필요합니다. 시작하겠습니다.